SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    perfect = good enough peach's Avatar
    Join Date
    Jun 2004
    Location
    -Netherlands-
    Posts
    1,383
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    using the HTML element for a background image

    Hi

    I'm currently working on a design that has a feature that I'm coding pretty often. It's a centered column with a top background that spans across the viewport and a bottom background that spans across the viewport.

    The first element below body is the #container div, and there really is no reason (Semantically speaking) for there to be any other wrapper element around the container.

    I do however need 2 background images outside of the container, because while the container is centered and has a width, the background images need to span across the whole browser. One obvious place to hang an image onto is the body element.
    For the second image, most sites would use another wrapper div around the #container, but I'm thinking why not set the background color on the <html> tag (instead of body), set an image background on the html tag and set the other image background on the body tag.

    Are there any objections to this technique? Seems like a logical way to solve this problem but I've never seen a site really style the HTML tag. I guess there is a possibility that some browsers add specific styles to the html document that can possible conflict with normal styling.

  2. #2
    SitePoint Enthusiast
    Join Date
    May 2007
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, a background placed on the HTML tag does not show up in the browser so you won't see it whille viewing the page.

  3. #3
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Evoken View Post
    Well, a background placed on the HTML tag does not show up in the browser so you won't see it whille viewing the page.
    ????? - applying a background separately to the html element does work. However, there can be unexpected behaviour as both the body and html elements are normally only as high as the content. A background applied to the html will fill the viewport vertically, but its vertical position will be relative to the html height in FF, and relative to the viewport height in IE. Any background applied separately to the body element will be cut off at the body height.

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    And to avoid that I assume you can just set the height to 100&#37; for both the html and body elements
    Code:
    html,body{height:100%;position:relative;}
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    perfect = good enough peach's Avatar
    Join Date
    Jun 2004
    Location
    -Netherlands-
    Posts
    1,383
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Evoken View Post
    Well, a background placed on the HTML tag does not show up in the browser so you won't see it whille viewing the page.
    sure it will, you just need to make sure your body tag does not have a background color that will cover it up.

  6. #6
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    And to avoid that I assume you can just set the height to 100% for both the html and body elements
    Yes, but if a background image applied to either is positioned at the bottom of the element and the page height is greater than the viewport, the image will scroll up the page.

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    You can set its' position to fixed yes? Even IE6 supports fixed background elements only on the body so that should work.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  8. #8
    SitePoint Enthusiast
    Join Date
    May 2007
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by peach View Post
    sure it will, you just need to make sure your body tag does not have a background color that will cover it up.
    Oh, interesting! Didn't know that, I tried it but left the bg color to the default value.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    See a recent Sitepoint article about styling the html element and take note of mine and Tommy's comments

  10. #10
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    I'm currently working on a design that has a feature that I'm coding pretty often. It's a centered column with a top background that spans across the viewport and a bottom background that spans across the viewport.
    I made a similar design once and ended up having the main chunks spanning 100% to hold bg images while inside were either centered content or centered boxes. It did give me more containers than I otherwise would have had.

  11. #11
    perfect = good enough peach's Avatar
    Join Date
    Jun 2004
    Location
    -Netherlands-
    Posts
    1,383
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    I made a similar design once and ended up having the main chunks spanning 100% to hold bg images while inside were either centered content or centered boxes. It did give me more containers than I otherwise would have had.
    yeah that's what I often end up with, multiple containers that span the whole vieport, paired with multiple centered boxes. .

  12. #12
    perfect = good enough peach's Avatar
    Join Date
    Jun 2004
    Location
    -Netherlands-
    Posts
    1,383
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    See a recent Sitepoint article about styling the html element and take note of mine and Tommy's comments
    thanks, nice article. I like this sentence "and Safari will be extremely confused and display a broken mess." lol.

    too bad about the standards not allowing a background image on the html element.

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    too bad about the standards not allowing a background image on the html element.
    You misread a little

    The background is allowed on the html element in xhtml but inadvisable in html.

    However due to all the problems mentioned its one of those things I avoid doing when I know there are alternatives that work without hitch


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
  •