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

CSS, HTML, Вопросы и ответы
28 февраля 2012

Вопрос

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

Сейчас я делаю так: одну картинку назначаю фоновой для тега html, а другую для тега body.

html {
    background: url(images/bg.png);
}
body {
    background: url(images/bgtop.png) repeat-x;
}

Является ли такой подход правильным? Что, если я захочу 3 картинки? Возможно, есть метод получше?


Ответ №1

CSS3 позволяет делать такие вещи, это будет выглядеть следующим образом:

body {
    background-image: url(images/bgtop.png), url(images/bg.jpg);
    background-repeat: repeat-x, repeat;
}

Ниже пример который отображает подобный код. Обратите внимание, что на первое место выдвигается та картинка, которая указана первой.

Пример

Современные версии всех браузеров нормально воспримут такой код, однако если Вам необходима поддержка IE8 и ниже, тогда лучший способ добиться такого эффекта - добавить дополнительные div-ы:

<body>
    <div id="bgtopdiv">
        Здесь контент
    </div>
</body>
body{
    background-image: url(images/bg.png);
}
#bgtopdiv{
    background-image: url(images/bgtop.png);
    background-repeat: repeat-x;
}
Пример

Нет комментариев

Добавить комментарий


(обязательно)