How to use 2 fake images using HTML tag and BODY tag

Question

I have a background image with tiles, but I want to overlay another graphic image on it. I tried using:

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

But this does not work perfectly right. The body tag behaves like a div because it does not stretch to fit the screen.

I'm sure I'm 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 100% width / height inside? This should work with every browser.