CSS trick: two backgrounds

This is an example page for the two-background CSS trick, as explained on TechKnack

The Images:

The main (tiled) background image:

The sidebar's (vertically-repeated) background image:

The CSS:


/* Clear margins and padding, a good start to any CSS */
* {margin:0;padding:0;}

html {
background:#CCA url(http://img.villagephotos.com/p/2005-1/928148/bg.gif);
/* Height is 100%, so the body can be 100% */
height:100%;
}

body {
background:url(http://img.villagephotos.com/p/2005-1/928148/strings.gif) repeat-y;
background-position:50px top;
margin:0;
padding:0;
/* Height is 100%, so the tiled BG will tile all the way down
the page, not just as far down as the page's content
(when the content's height < window's height) */
height:100%;
}
/*
Hackety-hack-hack...
FF2, with the above code, will only display the repeat-y image for as
high as the window's viewport is; higher content (upon
scrolling) will not have the bg.
This "hack" makes the tiled background work properly in FF2.
This type of "advanced selector" is not understood by IE6...dunno
'bout IE7.
*/
html>body {
min-height:100%;
height:auto;
}

The Quirks:

With a blank body (no content), the effect works fine. However, as soon as I threw an h1 header into the mix, the element's automatically applied top and bottom margins pushed the entire body down in FireFox, by about 20px. In IE6, it seemed to add an extra bit of height to either the body or html element, which caused a vertical scrollbar to appear on the browser window. Fixes that worked include floating the container div, absolutely positioning the div, and "resetting" padding and margins for the h1 element. On this page, I used the total reset method "* {margin:0; padding:0;}"