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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Body background positioning

    Hi there,

    I'm currently working on a website that can be seen here: http://www.michaelskinnider.com/tethco

    I'm having a problem with the background. I have a jpg of a gradient that goes from grey at the bottom to white on top, and I need the jpg to be positioned at the very bottom of the page. However, when I set the background CSS property to 100%, it seems to set the top - rather than the bottom - of the jpg to 100% down the page.

    Is there a way to set the bottom of the jpg to 100%? Alternatively, is there a way to set the background-position to 100% minus 200px, for example? If neither of these is possible, how can I get the background to the bottom of the page?

    Thanks!

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello daysrunaway,
    If your page has enough content that it will fill any viewport you expect to load your site then just clearing the floats should be enough.
    Try this and see if it's enough -
    Code:
    #container {
    	margin:0 auto;
    	width:960px;
    	background:#ff0; /*just a different color for demonstration*/
    overflow: auto;
    }
    It looks like your site is not tall enough though. Some browsers seem to expand body only enough to wrap it's contents so a background image may not fill the screen.
    If that's the case then another containing div may solve the problem. Try this bit of code based on this full height layout -
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	height: 100%;
    	margin: 0;
    	font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
    	color:#000;
    }
    #wrap {
    	min-height: 100%;
    	margin: 0;
    	background: #fff url(http://www.michaelskinnider.com/tethco/_/img/gradient.jpg) repeat-x bottom;
    }
    #container {
    	height: 600px;
    	width: 800px;
    	margin: 0 auto;
    	background: #999;
    }
    </style>
    </head>
    <body>
        <div id="wrap">
            <div id="container"> 
            <!--end container--></div>
        <!--end wrap--></div>
    </body>
    </html>
    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

  • Users who have thanked Excavator for this post:

    daysrunaway (11-20-2010)

  • #3
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for the advice, but the solution didn't work: rather than move the image to the bottom of the page, it just moved it to the bottom of the screen. Also, I'm looking to put the background image everywhere BUT the central container div - is this possible?

    Thanks again!

    Michael

  • #4
    Banned
    Join Date
    Jul 2010
    Posts
    66
    Thanks
    0
    Thanked 1 Time in 1 Post
    Hi,
    Proceed giving height as 900px and above and if the page is extended after that same grey can be continued by giving background:#496778 url(../images/imagename) repeat-x
    as shown then i think this problem will be solved

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by daysrunaway View Post
    rather than move the image to the bottom of the page, it just moved it to the bottom of the screen.
    When I add some content to make the site taller, you can see the image is starting ant the bottom of the page, not the screen. Look at it this way -
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	height: 100%;
    	margin: 0;
    	font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
    	color:#000;
    }
    #wrap {
    	min-height: 100%;
    	margin: 0;
    	background: #fff url(http://www.michaelskinnider.com/tethco/_/img/gradient.jpg) repeat-x bottom;
    }
    #container {
    	width: 800px;
    	margin: 0 auto;
    	background: #999;
    }
    br {margin: 50px 0;}
    </style>
    </head>
    <body>
        <div id="wrap">
            <div id="container"> 
            	some stuff
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
            	some stuff
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
            <!--end container--></div>
        <!--end wrap--></div>
    </body>
    </html>
    Or am I just mis-understanding your question?
    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


  •  

    Posting Permissions

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