Как заставить фоновое изображение придерживаться нижней части макета?

Question

У меня есть этот фон, код CSS:

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

Изображение имеет высоту 400px, и я хотел бы выровнять его по нижней части страницы.

Пока это работает только в Firefox. В Chrome и IE фоновое положение находится вверху по центру, а не по центру внизу.

Answer 1

Вам нужно также сделать высоту элемента html на 100%:

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

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

Кроме того, отрицательные поля не работают в IE6 / 7 (не уверен в IE8)