Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    New Coder crank01's Avatar
    Join Date
    Jan 2011
    Posts
    96
    Thanks
    10
    Thanked 2 Times in 2 Posts

    Exclamation Background image won't stretch to be full screen =S

    I am confused yet again lol. Here is the code I've been using to put y background image up.

    <body topmargin=0 leftmargin=0 marginheight=0 marginwidth=0 bgcolor="#FFFFFF" background="/images/pinkbackground.jpg" padding=0; height:100%; link="#ffff00" vlink="#ffff00">

    Now this code will not take up the full screen of the page
    Anyone have any ideas as to why? I've tried everything that some websites told me what to do. Please help me coding forums.
    Last edited by crank01; 02-25-2011 at 08:51 PM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,747
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello crank01,
    Your code is invalid. See the links about validation in my signature line.

    This would be valid -
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    body {
    	height: 100%;
    	margin: 0;
    	padding: 0;
    	background: url(/images/pinkbackground.jpg);
    }
    </style>
    </head>
    
    <body>
    </body>
    </html>
    Or this for inline code -
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    </head>
    
    <body style="width:100%; margin:0; padding:0; background: url(/images/pinkbackground.jpg);">
    </body>
    </html>
    To make that background image the full height/width of the browser window, have a look at this example.
    That does not preserve image ratio and can get skewed out of proportion so bad as to ruin your background.

    It could be that a jQuery solution would work better for you, see one here.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder crank01's Avatar
    Join Date
    Jan 2011
    Posts
    96
    Thanks
    10
    Thanked 2 Times in 2 Posts
    Ok thanks, let me have a go at it. and see how it works for me stay right there. lol

  • #4
    New Coder crank01's Avatar
    Join Date
    Jan 2011
    Posts
    96
    Thanks
    10
    Thanked 2 Times in 2 Posts
    Well I used the code that will stretch the image to fit the page, from the link u gave me, and I cant get the other stuff on the page to show up. I must have done something utterly wrong

    Edit: Nevermind I just had to resize the image to fix the problem =) thx
    Last edited by crank01; 02-25-2011 at 09:36 PM.

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,747
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by crank01 View Post
    Well I used the code that will stretch the image to fit the page, from the link u gave me, and I cant get the other stuff on the page to show up. I must have done something utterly wrong
    Hard to tell without having a look at it. Link us to your test site.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    New Coder crank01's Avatar
    Join Date
    Jan 2011
    Posts
    96
    Thanks
    10
    Thanked 2 Times in 2 Posts

    Question

    Exacavator, I fixed the last problem with my site, but now this may sound totally newbie, but hostgator duznt seem to be helping me, well... how do you make more pages? like i want to make a webpage called www.mysite.com/page2 now do I create a new file called page2.html under public_html? bcuz I tried doing this but it wouldn't load my new page

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,747
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by crank01 View Post
    Exacavator, I fixed the last problem with my site, but now this may sound totally newbie, but hostgator duznt seem to be helping me, well... how do you make more pages? like i want to make a webpage called www.mysite.com/page2 now do I create a new file called page2.html under public_html? bcuz I tried doing this but it wouldn't load my new page
    page2.html is fine for a name. Typing in your domain name is only going to load the index.html, other pages need to be linked to.

    For example:
    1. Type in mydomain.com and your site loads.
    2. On that site you have a link to page2.html that looks like this - <a href="page2.html">Page 2</a>


    See some menus you can use here.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #8
    New Coder crank01's Avatar
    Join Date
    Jan 2011
    Posts
    96
    Thanks
    10
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by Excavator View Post
    page2.html is fine for a name. Typing in your domain name is only going to load the index.html, other pages need to be linked to.

    For example:
    1. Type in mydomain.com and your site loads.
    2. On that site you have a link to page2.html that looks like this - <a href="page2.html">Page 2</a>


    See some menus you can use here.
    but when I load the webpage, it will only work with ".html" at the end of it, i cant just load the page xxx.com/2 .Why not??? I see other websites doing it this way

  • #9
    New Coder crank01's Avatar
    Join Date
    Jan 2011
    Posts
    96
    Thanks
    10
    Thanked 2 Times in 2 Posts

    Question

    Please help me guys

  • #10
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,747
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Somthing like www.mysite.com/page2 is actually referring to directories only. If a page loads with that address it's because there is another index.html there.
    The address would actually look like this - www.mysite.com/page2/index.html

    Both those addresses are the same.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #11
    New Coder crank01's Avatar
    Join Date
    Jan 2011
    Posts
    96
    Thanks
    10
    Thanked 2 Times in 2 Posts
    Ok thanks so much, yeah hostgator said there servers wouldnt be able to do that, when I chat talked to customer support. I hope the guy just didnt know what he was talking about. Thx person above me who I forgot his username

  • #12
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,747
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    [QUOTE=crank01;1058618] hostgator said there servers wouldnt be able to do that, when I chat talked to customer support. [/qhote]
    Pretty sure they can. That's a very basic thing, I would expect any server would be able to do it.
    I hope the guy just didnt know what he was talking about.
    Tech support giving wrong advice? That never happens!
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #13
    New Coder crank01's Avatar
    Join Date
    Jan 2011
    Posts
    96
    Thanks
    10
    Thanked 2 Times in 2 Posts
    haha, is it alright if I pm you if I ever need more help from you, about any other problems I get along the road? bcuz I'm sure alot of people are sick of hearing my noob questions lol

  • #14
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yo bro try this out and it should work
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>

    <style type="text/css">
    body {
    background: #FFFFFF url('IMAGE HERE') no-repeat;
    background-size: 100%;
    margin: 0;
    padding: 0;
    }
    </style>

    </head>

    <body>
    Background now should be stretched 100% both ways. If you wanna size it to a specific size you can do background-size: 100px 150px for width and height.
    </body>
    </html>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •