Some background (pun wholly intended)
Styling the <body> tag is a widely used and great way of setting up styles which other elements will inherit – as it is the root element of the page it’s also been used forever as a good place to put a background image – partly because of it always filling the window irrespective of how much content there is on the page – it doesn’t rely on the content of the page to reveal it’s background.
The reliance of this behavior has led to some very popular techniques including Dan Cederholm’s excellent Faux Columns – a staple part of the CSS diet and a great way to make columns appear to be of equal height on a page.
Houston…
I had a page design which wanted a tiling image to run across the top of the page (set as a background using something like background: url(images/top.gif) repeat-x 50% 0;) and also a tiling image to run vertically in the centre of the page (effectively one big column, using something like background: url(images/column.gif) repeat-y 50% 0;), kind of like this:
In the interest of adding as little extra markup as possible I had the thought of putting the background style for the top image on the <html> tag and the centre column background on the <body> tag – and that’s when it all started getting a bit weird…
With both the <html> and <body> tags styled with background images, the background on the <body> only extended as far as the content within it:
Exactly what you would expect of any block level element with a background but entirely not what I expected in light of the <body> tag’s normal behavior.
Sure enough, if I commented out the background style on the <html> tag, the background on the <body> went back to doing what it has always done – filling the window:
Not a solution – an explanation!
After a quick Googling I came across a couple of posts which help shed some light on this – Jacques Distler and Eric Meyer discuss the merits of styling the html tag – the part relevant to my problem being:
In XHTML the body element does not fill the entire viewport. So, when I apply a background styling to it, the background also should not fill the entire viewport.
Strictly speaking, the
element doesn’t cover the entire viewport in HTML either. But the CSS Spec recommends that, for HTML (but not XHTML) documents, the background of the body element be applied to the entire viewport anyway, so that it will work as expected legacy browsers (which don’t recognize styling the html element).
It would appear that to provide consistency1, major browsers will make backgrounds applied to the body tag cover the viewport, but when you style the html tag that behaviour is switched off – in other words, if you use the correct element (html) for styling the entire page, the body element is rendered the way the specification intended it to be.
A problem?
Strictly speaking, our reliance on browsers to render backgrounds on the <body> is wrong – now that all browsers (IE6 in standards mode and IE7 included) render backgrounds on the <html> tag correctly, we should really be using that element instead of the <body> for whole-page background image rendering. As Jacques Distler comments on the above article:
The point is that the only reason it works at all in Mozilla is because of an acknowledged bug. One morning you are going to wake up and discover that they’ve fixed the bug and thereby broken all your designs.
That’s the problem with coding to browser bugs instead of coding to Standards. I prefer to do the latter … and sleep at night.
The future
As browsers start to implement multiple background images on a single element (coupled with full alpha transparency in PNG’s), this issue will go away as we will be able to put all the images as layered backgrounds on the <html> tag. However WebKit based browsers (Safari etc.) are the only major browsers to support that right now, so don’t hold your breath.
1 And by consistency, I mean pandering to another legacy of Internet Explorer – it was IE’s lack of support (now fixed) for styling the <html> tag which led to this fix being required at all.
1 Comments
Okay, I get it, thanks for the tip, I’m a newbie to all of this and taking it all in is becoming quite a task. Thanks for being there for us cyber neighbors.
Respectfully,
Allison English
posted by Allison English, Jul 14, 02:48 AM