How to use 2 tiling background images using the HTML tag and the BODY tag

Question

I have a tiling background image, but I want to overlay another tiling image over it. I have tried using:

html {background: transparent url('../images/bgtile.jpg') repeat top center;}
body {background: transparent url('../images/body.png') repeat-y top center;}

But it doesn't work quite right. The body tag behaves like a div because it doesn't stretch to fit the screen.

I am sure that I am just missing something obvious.

Answer 1

Try this (It works in FF3 and IE7 and I assume Safari and Chrome):

html {
     background: transparent url('../images/bgtile.jpg') repeat top center;
     height: 100%;
}
body {
     background: transparent url('../images/body.png') repeat-y top center;
     height: 100%;
     overflow-y: scroll;
}
html > body {
    min-height: 100%;
    height: auto;
}

Answer 2

Why not work with a 100% width / height within the ? That should work with every browser.