Простое фоновое изображение без прокрутки

У меня есть, вероятно, простой вопрос, но я не могу найти на него ответ. У меня есть фоновое изображение, которое выглядит хорошо, плитки хорошо и отлично прокручиваются. Однако у меня есть второе фоновое изображение, наложенное поверх него, которое помещено внутри div-оболочки («whiteBackground», я полагаю, оно называется), и я не хочу, чтобы оно прокручивалось вместе со страницей. Поскольку содержимое и текст становятся длиннее и заставляют пользователя прокручивать страницу, я бы хотел, чтобы второй фон оставался статичным. Таким образом, когда пользователь прокручивает страницу вниз, создается впечатление, что второй фон просто совершенно неподвижен.

Я пытался сделать фиксированное фоновое вложение в моем div-оболочке, но это не помогло.

Любые идеи?

http://jsfiddle.net/SMc9R/

`#wrapper {
    position: relative;
    width:960px;
    min-height:768px;
    margin: 0 auto; 
    background-image:url('images/white_background.png');
    background-attachment: fixed;
    font-family:'MuroRegular';
}`

Это основная часть, в которой, как мне кажется, проблема.

Там нет изображений, но я подумал, что моей разметки и CSS должно быть достаточно. Любая помощь будет оценена по достоинству. Большое спасибо!


html css background-image
person Jon Ferriter    schedule 11.05.2013    source источник
comment
Если вы хотите иметь два фона, можно использовать несколько фонов для одного элемента: Несколько фонов на одном элементе   -  person Arbel    schedule 11.05.2013

Ответы (1)


arrow_upward
0
arrow_downward

Демонстрация: http://jsfiddle.net/SMc9R/1/. ВЫ хотите так.. или укажите какую-либо поправку относительно этой поправки...

 #banner {
position: absolute;
float:left;
width: 960px;
height:60px;
text-align: center;
font-family:'AmaticBold';
font-size: 50px;
background-image:url('images/banner.png');
background-repeat: no-repeat;
z-index: 4;
 }
person PraJen    schedule 11.05.2013