Как добавить два фоновых изображения к одному элементу?

🕛 23.01.2009, 00:16

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

Стили напрямую не позволяют добавить два фона к одному элементу, поэтому приходится идти на хитрость и вкладывать один элемент внутрь другого. При этом для каждого вложенного элемента создается своя фоновая картинка, за счет наложения блоков и рождается эффект, что элемент один, и он содержит несколько фоновых изображений. Здесь важно не добавлять отступы к внешним элементам, иначе эффект будет потерян.

Для примера рассмотрим создание вертикальных декоративных линий слева и справа от блока. Для этого вначале подготовим изображения, которые должны без стыков повторяться по вертикали. На рис. 1 показано фоновое изображение, которое будет применяться для первого элемента, оно будет формировать границу слева, а на рис. 2 фон для вложенного элемента, который добавляет границу справа.

Рис. 1. Фоновая картинка для границы слева

Рис. 2. Фоновая картинка для границы справа

В качестве блочного элемента, к которому добавляется фон, обычно используется тег <DIV> в силу его удобства и универсальности. Фоновое изображение устанавливается стилевым атрибутом background, как показано в примере 1.
Пример 1. Два фоновых изображения

HTML 4.01CSS 2.1IE 6IE 7Op 9.5Sa 3.1Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Два фоновых изображения</title> <style type="text/css"> BODY { background: #f2f0e3; /* Цвет фона веб-страницы */ } DIV.block { background: #fff url(images/bg_left.gif) repeat-y; /* Цвет фона блока, путь к фону с границей слева, повторение по вертикали */ width: 400px; /* Ширина блока */ } DIV.block DIV { background: url(images/bg_right.gif) repeat-y 100% 0; /* Путь к фону с границе справа, повторение по вертикали, расположение фона по правому краю блока */ padding: 10px; /* Поля вокруг текста */ } </style> </head> <body> <div class="block"> <div> За 11 месяцев вахты радисты провели 8642 сеансов связи общим объемом 300625 групп. Это только метео и аэротелеграммы. Принято от радиостанции мыс Челюскин 7450 групп. </div> </div> </body>
</html>


В данном примере, чтобы фон добавлялся только к нужному тегу <DIV>, а не ко всем подобным элементам на странице, используется класс с именем block, к которому и применяются все стилевые атрибуты. Чтобы задать стиль только для вложенного <DIV> в примере указывается контекстный селектор (конструкция DIV.block DIV), он определяет стиль только для тега <DIV>, расположенного внутри <DIV class="block">.