Браузери дозволяють додавати до елемента довільну кількість фонових зображень, перераховуючи параметри кожного фону через кому. Досить скористатися універсальною властивістю background і вказати для нього спочатку один фон, а через кому другий.
Для прикладу розглянемо створення вертикальних декоративних ліній ліворуч і праворуч від блоку. Для цього спочатку підготуємо зображення, які повинні повторюватися без стиків по вертикалі. На рис. 1 показана фонова картинка, яка буде виводитися по лівому краю, а на рис. 2 картинка для виведення з правого краю.
Мал. 1. Фонове зображення для кордону зліва
Мал. 2. Фонова картинка для кордону праворуч
Якщо елемент, до якого додається фон, скористаємося <div>, а щоб відрізняти його від інших елементів, до йому додамо клас block (приклад 1).
Приклад 1. Два фонових зображення
< ;!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Два фонові зображення</title> <style> body {background: #f2f0e3; /* Колір тла веб-сторінки */
}
.block { background: url(/example/image/bg_left.png) repeat-y, url(/example/image/bg_right.png) repeat-y 100% 0 #fff; padding: 10px; /* Поля навколо тексту */
}
</style>
</head>
<body> <div class="block"> За 11 місяців вахти радисти провели 8642 сеанси зв'язку загальним обсягом 300625 груп. Це тільки метео та аеротелеграми. Прийнято від радіостанції мис Челюскін 7450 груп.
</div>
</body>
</html>Результат цього прикладу показаний на рис. 3.
Мал. 3. Вид блоку з двома фоновими картинками