How to make the background image stick to the bottom of the layout?

Question

I have this background, css code:

body {
    background: #FFF url('images/bg.png') no-repeat bottom center;
    margin-bottom: -500px;
    width: 100%;
    height: 100%;
    color:#999;
}

The image has a height of 400 pixels, and I would like it to align at the bottom of the page.

So far this only works in Firefox. In Chrome and IE, the background position is on top, not bottom.

Answer 1

You also need to make the element height html100%:

html, body {
    height: 100%; width: 100%;
    padding: 0; margin: 0;
}

body {
    background: #FFF url(images/bg.png) no-repeat bottom center;
}

In addition, negative fields do not work in IE6 / 7 (not sure about IE8)