Question

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.

Answer 1

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)