SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Background-image on body relative to viewport

    I've noticed that if you set a background-image on the body, its position will be relative to the viewport rather than the body element, but only if there is not a background of some sort defined for the html element.

    With this CSS, the image appears at the top left of the viewport.
    Code css:
    body {
      margin:auto;
      background:white url("minitree.png") no-repeat 1em 1em;
      width:800px;
    }

    With this, it appears correctly 1em from the top left of the body.
    Code css:
    html {
      background:white;
    }
    body {
      margin:auto;
      background:white url("minitree.png") no-repeat 1em 1em;
      width:800px;
    }
    Is this correct behaviour? IE8, Chrome and FF3.6 do the same thing. If so, what is the logic behind it?

  2. #2
    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)
    I have seen that before and I believe it has to do with section 14.2 of the spec?

    I have to run to dinner, so apologies if that isn't it. I'll relook it over thoroughly after

    Edit after dinner-This is some part of hte spec. I just will have to find it . I know I have read somewhere about this before on some other forum
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    With this CSS (no bg color on html), the image appears at the top left of the viewport.

    Is this correct behaviour? If so, what is the logic behind it?
    When there is no background color set for the html, then any background set on body will actually be rendered as the html background.

    Yes it is correct and I think the reasoning for it is because the body does not always extend to the bottom of the viewport unless you set 100% height on it. The html does extend the full height and so it picks up where the body may prematurely end without a defined height thus continuing the BG color on the full canvas.

    And yes it is explained in 14.2 of the specs
    The background of the root element becomes the background of the canvas and covers the entire canvas, anchored (for 'background-position') at the same point as it would be if it was painted only for the root element itself. The root element does not paint this background again.
    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>body/html background</title>
     
    <style type="text/css">
     
    html {background:red}
     
    body {background:yellow;}
     
    #wrapper {
        width:600px;
        height:400px;
        margin:0 auto;
        background:lime;
    }
     
    </style>
    </head>
    <body>
     
    <div id="wrapper">
    </div>
     
    </body>
    </html>

  4. #4
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Yes, it's in that page you link to:

    Quote Originally Posted by W3C
    For HTML documents, however, we recommend that authors specify the background for the BODY element rather than the HTML element. For documents whose root element is an HTML "HTML" element or an XHTML "html" element that has computed values of 'transparent' for 'background-color' and 'none' for 'background-image', user agents must instead use the computed value of the background properties from that element's first HTML "BODY" element or XHTML "body" element child when painting backgrounds for the canvas, and must not paint a background for that child element. Such backgrounds must also be anchored at the same point as they would be if they were painted only for the root element.
    Seems like an odd decision to make. Anyway, thanks for the link, Ryan.

  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 Raffles View Post
    Yes, it's in that page you link to:



    Seems like an odd decision to make. Anyway, thanks for the link, Ryan.
    I thought so too when I first read about that a long time ago (when I first began web design) and I thought there was just a good reason I'm missing..but there really isn't. There is a corrolation between the two elements (the body and html element have a relationship together) but to have this sort of behavior happen is baffling me lol .

    I'm sure the W3C had their own reasons for doing it this way.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  6. #6
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,272
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Because of this unintuitive behaviour, I believed the body did always fill the viewport like the html element... til Tommy slapped me with a wet trout in another thread about this.

    So I made a fakery page and threw a border around the little bit of body content and lo! the borders acted like any other static box : (

    I'm sure the W3C had their own reasons for doing it this way.
    Hahahahaha ha ha ha haha haha ha ha ha ha...

    You know, it could be just because someone was hungry and they wanted to wrap this up in time for dinner. Or because the tea-leaves forspelled it.

  7. #7
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Yeah, until a couple of years ago I thought the body was just more or less the same as the html element. It actually is just like a DIV which I think a lot of people don't realise, as it often negates the need for multiple "wrapper" DIVs that are so prevalent.

    Ray, that certainly sounds like logic but like Stomme says, it still seems very unintuitive to me!

  8. #8
    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)
    I believe the original decision was based on the fact that legacy browsers didn't recognize the html element and therefore you could carry on styling body and have it propagate to html in newer browsers.

    There's a sitepoint blog on some aspects of this (see mine and Tommy's comments)

    I never see a need to add background colors to the html element unless its for some kind of a trick effect. It's better off left alone .

    The only styles I apply to it are to remove margins and padding as other rules can cause bad effects in lots of not so old browsers (in safari <2 (iirc) adding position:relative to html makes all other positioned elements on the page disappear.).

    Of course when served as real xhtml things are different and html and body are treated separately.

  9. #9
    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 Raffles View Post
    Yeah, until a couple of years ago I thought the body was just more or less the same as the html element. It actually is just like a DIV which I think a lot of people don't realise, as it often negates the need for multiple "wrapper" DIVs that are so prevalent.

    Ray, that certainly sounds like logic but like Stomme says, it still seems very unintuitive to me!
    Well there are some key differences from it and a regular block. Overlfow:hidden; set on it will hide content with or without a height set.
    It's basically like a block though there are some differences.

    Older IE do not recognize much styling on the HTML element at all, aka background images on the HTML element, e tc.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


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
  •