| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 10.5+ | 1.3+ | 3.6+ | 2.1+ | 1.0+ |
Завдання
Додати два фонові зображення для блоку з допомогою CSS3.
Рішення
Сучасні браузери дозволяють додавати до елемента довільне число фонових зображень, перераховуючи параметри кожного фону через кому. Досить скористатися універсальним властивістю background і вказати для нього спочатку один фон та через кому-другий.
Для прикладу розглянемо створення вертикальних декоративних ліній ліворуч і праворуч від блоку. Для цього спочатку підготуємо зображення, які повинні без стиків повторюватися по вертикалі. На рис. 1 показана фонова картинка, яка буде виводитися по лівому краю, а на рис. 2 картинка для виведення по правому краю.
Рис. 1. Фонова картинка для кордону ліворуч
Рис. 2. Фонова картинка для кордону праворуч
Як блокового елемента, до якого додається фон, зазвичай використовується тег <div> в силу його зручності і універсальності, щоб виділити його серед інших елементів, до нього додається клас block (приклад 1).
Приклад 1. Два фонові зображення
HTML5,CSS3IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Два фонових зображення</title>
<style>
body {
background: #f2f0e3; /* Колір фону веб-сторінки */
}
.block {
background: url(images/bg_left.gif) repeat-y,
#fff url(images/bg_right.gif) repeat-y 100% 0;
padding: 10px; /* Поля навколо тексту */
}
</style>
</head>
<body>
<div class="block">
За 11 місяців вахти радисти провели 8642 сеансів зв'язку загальним об'ємом 300625 груп. Це тільки метео- і аеротелеграми.
Прийнято від радіостанції мис Челюскін 7450 груп.
</div>
</body>
</html>
Результат цього прикладу показано на рис. 3.
Рис. 3. Вигляд блоку з двома фоновими картинками