Несколько фоновых изображений CSS3 не работают

У меня есть два фоновых изображения, которые я хотел бы разместить слева и справа от моего div-оболочки. Для этого я использую свойство background-image CSS3, но оно не работает. Может ли кто-нибудь понять, почему это не работает ни в одном браузере. Я также хотел бы знать, как только я заработаю в современных браузерах, будет ли он работать в более старых браузерах, таких как IE 7?

Вот изображение того, что я пытаюсь сделать. У меня уже есть навигация (зеленый баннер), поэтому мне нужно поставить хитрый красный баннер и обвести фон.

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

введите здесь описание изображения

body{ 
    background-color:#e5e5e5; 
    background-image: url("../img/background_left.png"),url("../img/background_right.png");
    background-position: right top, left top; 
    background-repeat: no-repeat, no-repeat;
    background-attachment: fixed, fixed;
    }

css background-image
person Community    schedule 13.10.2012    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Добавьте высоту к <body>, и все заработает — DEMO

html, body {
    height: 100%;
}

body{ 
    background-attachment: fixed, fixed;
    background-color:      #e5e5e5; 
    background-image:      url(http://lorempixel.com/300/200), url(http://lorempixel.com/200/300);
    background-position:   right top, left top; 
    background-repeat:     no-repeat, no-repeat;
} ​

Но это не будет работать в старых IE - поддержка нескольких фонов

person Zoltan Toth    schedule 13.10.2012
comment
Золтан, прежде всего, спасибо за помощь в решении этой проблемы. Ваш код размещает фоновые изображения слева и справа от тела, но не остается заподлицо по бокам. - person ; 13.10.2012