How to force HTML background to bottom when page is smaller than window

Question

I have a page with 2 background images, one of them needs to show at the very bottom of the page. Currently I've implemented it like this:

body {
    background-image: url('/cheri/image/background.png'), 
                      url('/cheri/image/backgroundB.png');
    background-position: top, bottom;
    background-repeat: repeat-x, repeat-x;
}

This works fine when page content is higher than the browser window, but if it's smaller an empty white space is left below the background image, like in this picture:

http://img198.imageshack.us/img198/4560/screenshot20120916at851.png

I have tried to set the body as position:absolute, height:100%, but it did not render correctly when scrolling was present. I have also attempted to create a separate div for the background image and absolutely position it to the bottom, but since I have different position properties for some elements that occur at the bottom, the z-indexing didn't work properly.

Thanks for any help!

Answer 1

Use min-height: 100% on both html and body:

html, body { min-height: 100%; }

DEMO

It creates no issues when you have enough content to cause scrolling.

DEMO

Answer 2

Set the HTML element as well:

html {
    background-image: url('/cheri/image/background.png'), url('/cheri/image/backgroundB.png');
    background-position: top, bottom;
    background-repeat: repeat-x, repeat-x;
}