Using the HTML Element for Background Images

There’s a pretty simple tutorial over at Web Designer Wall covering large backgrounds with CSS. Of course, I enjoy the “pretty simple” write-ups because there almost always manages to be some nugget of gold for me. In this case, I had no idea that it was possible to use the HTML element to display background images.

The first few examples are all things that I would expect most people with a little experience would be able to figure out. Example three describes having more than one image in the background, and it does so by adding an extra div at the top of the body to enclose all of the page’s content. This would most definitely have been my solution. It seems obvious enough.

But if you look down at the comments (you have to “expand all”), number eight mentions:

Have you thought about using the html selector when adding two images? One on html and one on the body.

So the author updated example number three with styling rules that, in part, look like this:

html 
{
	background: #73ADD7 url(images/gradient.gif) repeat-x;
}
body 
{
	background: url(images/sky.jpg) no-repeat center top;
}

I would have never thought to add a background image to the HTML element. Is that legal?

Valid?

The example page passes validation for transitional doc types and for strict (the warning is given for overriding the doctype).

However, the CSS 2.1 recommendation says:

For HTML documents, however, we recommend that authors specify the background for the BODY element rather than the HTML element.

The CSS 3.0 draft does not seem to include a statement either way, though it does state that it “includes and extends the functionality of CSS level 2 [CSS21]….” (see the Abstract).

So even though there is a recommendation against doing this, it does pass muster with the validation service.

In the long run, though, it is somewhat of a moot point. This is because CSS 3 includes the ability to define multiple background images for one element.