Full-page background in HTML

I am trying to make a page background for my website. Is this a good way to do it?

This is my HTML:

And this is my CSS:

#page-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

The first small comment is that there's no need to put this extra div tag. Simply apply the page-background id to your img tag. It's still nice that you put it in the HTML code.

The other two issues are image ratio (do you want it to be preserved?) and browser support (willing to support IE6 and old Android and iPhones?)

• position: fixed is not supported before iOS 5 and Android 4.0. Doesn't work on IE6 either. You could use a method that has been tested for every desktop browser since IE5 and will also work on any phone (tested on my old Android).

• If you want to preserve image ratio and don't care about old desktop browsers, you could use the CSS3 background-size:cover property supported since IE9, Android 2.2 and iOS4.

• If you want to preserve image ratio and support every browser, there's the usual JavaScript fallback. Use Modernizr to detect the CSS3 property and this jQuery script to simulate background-size: cover.

StackExchange Code Review Q#9449, answer score: 5