SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Body bg image aligned to bottom of page?

    Hi-
    Can I align a background image on the body to the bottom. I.e:

    Body { background: #fff URL(image.gig) bottom left repeat-x;

    ?

    I have a background image with a line throug on it horizontally which in turn runs through my footer so I need it aligned to the bottom so it always occurs at the same point no matter how tall the page

    Will it work cross browser

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Sounds like it would be better to associate the bg image with the footer, unless you are using height: 100%. Do you have a link?
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    If you want the body backgorund image to align to the bottom you need to allow 100% height (unless your content reaches it)
    Code:
    html,body{height:100%;}
    body{position:absolute;width:100%;}/*Opera height trigger*/
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,295
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    As Ryan mentioned you can't simply place a background image at the bottom of the body because that will in effect place it at the bottom of the viewport. That will only intersect with your footer if the footer also happens to be at the bottom of the viewport also.

    You could do this with fixed positioning for both the background image and the footer and then they would coincide. However IE6 doesn't understand fixed position (other than for the body background).

    Instead you would be be better placing the image at the bottom of your page container which would also hold your footer and therefore always be a match.

    Or as mentioned by Ralph above incorporate the image into the footer element itself.
    There are so many things to take into account it's hard to give a definitive answer.

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    As Ryan mentioned you can't simply place a background image at the bottom of the body because that will in effect place it at the bottom of the viewport. That will only intersect with your footer if the footer also happens to be at the bottom of the viewport also.
    Not the viewport, just the end of the content.
    You could do this with fixed positioning for both the background image and the footer and then they would coincide. However IE6 doesn't understand fixed position (other than for the body background).
    I think we should mention that it's possible to simulate fixed positioning in IE6<
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,295
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Not the viewport, just the end of the content.

    No - not if you have set html and body height to 100&#37;. The image will only be at the bottom but the content will scroll pass the image and then the image will scroll upwards in the middle of the content.

    IE6 and 7 will put the image at the end of the content but ie8 and other good browsers will put the image at the bottom of the viewport.

    When you set 100% height on the body you effectively clip the body to 100% only. It never usually matters as the content can just over-run it without problem.

    If you don't set a height on the body then the bottom position is the bottom of the current content's height and the image will then follow the bottom of the content down the page.

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    No - not if you have set html and body height to 100&#37;. The image will only be at the bottom but the content will scroll pass the image and then the image will scroll upwards in the middle of the content.
    I thought you meant your statement without applying it. The context of your talk led me to believe that. Sorry foor the misunderstanding,
    As Ryan mentioned you can't simply place a background image at the bottom of the body because that will in effect place it at the bottom of the viewport.
    Nothing was said about the height being applied.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  8. #8
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I neglected to mention that the design I was working from had a vertical gradient aswell as the horizontal line that intersects the footer. The template a was creating had to accomadate varying lengths of content.

    In the end I made a 100&#37; wide container for the footer and titled a background image with the horizontal line in it so it was always in the correct place in relation to the footer content. I then created a 100% wide container for the main site containing the gradient that was much higher than it needed to be. This way no matter how high the page gets the footer always matches the body bg..

    Thanks again


Bookmarks

Posting Permissions

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