- Графические форматы
- Изображения
- Фоновая картинка
- Как добавить два фоновых изображения к одному элементу?
- Как добавить две фоновые картинки на веб-страницу?
- Как добавить фоновый рисунок на веб-страницу?
- Как поместить фоновый рисунок в правый нижний угол страницы?
- Как растянуть фон на всю ширину окна браузера?
- Как сделать, чтобы фон не повторялся?
- Как сделать, чтобы фон повторялся только по вертикали?
- Можно ли сделать анимированный фон?
Разделы
Как добавить два фоновых изображения к одному элементу?
Метки:
Фоновые картинки достаточно активно используются для создания блоков, поскольку с их помощью формируется самый причудливый дизайн. В частности, можно добавлять к элементу скругленные уголки, декоративные вертикальные и горизонтальные линии, а также многое другое.
Стили напрямую не позволяют добавить два фона к одному элементу, поэтому приходится идти на хитрость и вкладывать один элемент внутрь другого. При этом для каждого вложенного элемента создается своя фоновая картинка, за счет наложения блоков и рождается эффект, что элемент один, и он содержит несколько фоновых изображений. Здесь важно не добавлять отступы к внешним элементам, иначе эффект будет потерян.
Для примера рассмотрим создание вертикальных декоративных линий слева и справа от блока. Для этого вначале подготовим изображения, которые должны без стыков повторяться по вертикали. На рис. 1 показано фоновое изображение, которое будет применяться для первого элемента, оно будет формировать границу слева, а на рис. 2 фон для вложенного элемента, который добавляет границу справа.
Рис. 1. Фоновая картинка для границы слева
Рис. 2. Фоновая картинка для границы справа
В качестве блочного элемента, к которому добавляется фон, обычно используется тег <DIV> в силу его удобства и универсальности. Фоновое изображение устанавливается стилевым параметром background, как показано в примере 1.
Пример 1. Два фоновых изображения
<!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(bg_left.gif) repeat-y; /* Цвет фона блока,
путь к фону с границей слева,
повторение по вертикали */
width: 400px; /* Ширина блока */
}
DIV.block DIV {
background: url(bg_right.gif) repeat-y 100% 0; /* Путь к фону с границе справа,
повторение по вертикали,
расположение фона по
правому краю блока */
padding: 10px; /* Поля вокруг текста */
}
</style>
</head>
<body>
<div class="block">
<div>
За 11 месяцев вахты радисты провели 8642 сеансов связи общим
объемом 300625 групп. Это только метео и аэротелеграммы.
Принято от радиостанции мыс Челюскин 7450 групп.
</div>
</div>
</body>
</html>Результат данного примера показан на рис. 3.
Рис. 3. Вид блока с двумя фоновыми картинками
В данном примере, чтобы фон добавлялся только к нужному тегу <DIV>, а не ко всем подобным элементам на странице, используется класс с именем block, к которому и применяются все стилевые атрибуты. Чтобы задать стиль только для вложенного <DIV> в примере указывается контекстный селектор (конструкция DIV.block DIV), он определяет стиль только для тега <DIV>, расположенного внутри <DIV class="block">.
Графика для Web
© 2006–2009 Влад Мержевич. Написать сообщение автору
Сайт работает под управлением системы Drupal
НЕ могу никак разобраться!Вроде все правильно делаю..А очень надо!
а что тут сложного? два вложенных блока, у каждого свой фон: у одного - слева, у другого - справа
что-то не получается. Левая отображается, а правая нет.
вот код
DIV.TEXT {
background: #ffffff url(img/text_l.gif) repeat-y; height: 100%;
width: 100%; /* Ширина блока */
}
DIV.block DIV {
background: url(text_right.gif) repeat-y 100% 0;
}
<table height=100% width=100%>
<tr>
<td width=20%>
</td>
<td width=60%>
<div class=text>
<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci t
ation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum ir
iure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nu
lla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
delenit augue duis dolore te feugait nulla facilisi
</div>
</div>
</td>
<td width=20%>
</td>
Спасибо! То что нужно
Скажите а могу я статьи с вашего сайта у себя на блоге публиковать? Е сли да - то ссылку ставить или просто источник указывать?
sportmasterrr, да можете. Укажите только ссылку на этот сайт.
Огромное человеческое спасбо!
Хмм.. где-то подобное уже видел. Рекомендую вам посмотреть кто это у вас тырит посты. Например, через Гугл.
Кстати, диз в Opera немного скошен. Проверьте style.css.
Спасибо за замечательную информацию!
Спасибо за информацию. Ясно и понятно. молодца.
У Вас случайно нет других сайтов?
Здравсивуйте Влад! Всё сделал как написано, вот только в некоторых фаилах рисунок правой границы захватывает в блок заголовки. Подскажите пожалуйста, где закрался баг?
Отправить комментарий