How to get background image to stick to bottom of layout?

cross-browser, css

Solution

You need to make the `html` element height 100% too:

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

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

Also, negative margins don't work in IE6/7 (not sure about IE8)

Problem

I have this background, the css code is: ``` body { background: #FFF url('images/bg.png') no-repeat bottom center; margin-bottom: -500px; width: 100%; height: 100%; color:#999; } ``` The image is 400px tall, and I would like to make it align to the bottom of the page. So far, this only works in Firefox. In Chrome and IE the background position is at top center, instead of bottom center.

Original source