Garrick Cheung

Sharing what I know and learn about CSS, MooTools, Javascript, PHP and etc.

SitePoint’s Andrew Tetlaw on Styling html and body tags

Posted on | February 13, 2009 | 3 Comments

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:

1
2
3
4
5
6
7
8
9
10

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.

Category: CSS

Comments

3 Responses to “SitePoint’s Andrew Tetlaw on Styling html and body tags”

  1. moonkiki
    February 23rd, 2009 @ 1:24 pm

    You often are the best, but this css doesn t run so well on my mac…. comment is white on light gray (argh) and input text are not resized… just a suggestion ;)
    for the rest, don’t stop to post for us
    Nunzio

  2. Garrick
    February 23rd, 2009 @ 2:32 pm

    Wow, it totally broke, and I didn’t even notice. Thanks for the heads up Nunzio.

  3. moonkiki
    February 23rd, 2009 @ 2:34 pm

    now is great :)

Leave a Reply





taking viagra woman Cheap Viagra
cheap gerneric viagra?