CSS-позиционирование фонового изображения

Question

html { 
    background: #9c9c9c url(../images/bg-bottom.jpg) center top;
}
body {
    border-top:2px solid #fecd2a;
    background:#9c9c9c url(../images/bg.jpg) repeat-x center bottom;
}

Мне нужен bg.jpg, который представляет собой большой фон с черным градиентом вверху, чтобы он был вверху, а bg-bottom.jpg - для повторения внизу. Почему это не работает, есть ли и более простой способ? Помимо создания одного длинного изображения.

http://fluroltd.com/clients/harveys/latest-news/

Answer 1

Похоже, вам нужно переключиться вокруг вашего позиционирования и использовать прозрачный фон для тега body:

html {  
    background: #9c9c9c url(../images/bg-bottom.jpg) center bottom 
} 

body { 
    border-top:2px solid #fecd2a; 
    background: transparent url(../images/bg.jpg) repeat-x center top; 
} 

Answer 2

Ваш CSS на body должен быть

background: url("../images/bg.jpg") repeat-x scroll #9C9C9C;

Я не думаю, что добавление фона к вашему HTML-тегу поможет вам где-нибудь. На вашем месте я бы сделал одно очень длинное изображение узкой ширины, которое, возможно, не будет превышать длину вашей страницы Вы не можете иметь несколько BG без использования CSS3, что я лично не рекомендовал бы.