CSS Problems, Only works in Firefox. Chrome and IE have problems?

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 height, and I would like to make it stick with bottom, apperantly, only works in firefox, in chrome and IE the background position is at top center, instead of bottom center. Any ideas? I have been struggling for few hours to resolve this stupid bug!!

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)