SitePoint\’s Andrew Tetlaw on Styling html and body tags

If a page has a background different from it\’s content\’s background, like most people, I usually begin building a page by styling the body tag with one background and a div container where the content would go with another background. SitePoint\’s Andrew Tetlaw wrote up a pretty awesome article on making use of the html tag along with the body tag so I won\’t have to add redundant tags for backgrounds.

The Take Away

If you didn\’t head over to Andrew\’s article to learn the ins-and-outs of his explanation, which I think you should because you\’ll understand why you\’re using this code, here are the two main things I learned:

Adding a background image to the html and body elements works fine, and you can use it in place of multiple background images that only Safari currently supports.

And…

There’s one big gotcha though: if you need to use absolute or relative positioning for elements inside the body element. I’d assumed that since all elements obtain a positioning context from the body element by default, if I centered the body element the default positioning context should adjust accordingly. I was wrong! The default positioning context remains fixed to the viewport; you have to add position:relative; to the body style to create a new positioning context.

The Code

So, you end up with this awesome code:

html {
   background-color: #333;
}

body {
    background-color: #fff;
    width: 750px;
    margin: 0 auto;
    position:relative;
}

Thank you Andrew! I\’ve learned a lot from your article.