Back a few days ago I have encountered a problem at the job when trying to design a layout for one of our customers. What I was trying to do is to have two different backgrounds: one that stretches 100% vertically and one that stretches 100% horizontally.
The page structure was pretty simple, having following divs:
First thing I did was to have a background image that stretches 100% horizontally. That was not an issues.
html, body{background:#fff url(images/fullhorizontally.gif) repeat-x;}
The problem arose when I tried to add to the vertical image to the container.
#container{background:#fff url(images/fullvertically.gif) repeat-y;}
The purpose of this image that stretches 100% verically, was to visually separate the left navigation bar from the page content. What I was expected to see on Mozilla Firefox is that that image will run from the header to the footer. Yet, this didn’t happen. The background image didn’t show at all. And this was because the height of container div was not the same with the height of left. Actually [using webdeveloper extension for Firefox] I realised that the height of container was 0.
So, I had to find another solution. This is what came in my mind: why not having those two backgrounds applied one to the html and one to the body? This is what I did and it worked! I have applied the horizontal background to html and the vertical background to body.
html, body { width: 100%; height: 100%; margin: 0; padding: 0; }
html { background:#fff url(images/fullhorizontally.gif) repeat-x; }
body { background:#fff url(images/fullvertically.gif) repeat-y; }
The way I have put these images is not arbitrary. The following image will explain why I styled the html and body this way:

As you can see, the height of the html is as the height of the user agent window is, while body is as height as the page content is.
I’m sure that there are other techniques to accomplish this, but this one came to me at that moment. And it solved my problem :).