<час datetime="2010-09-23T08:40:00">23.09.2010
Влад Мержевич
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Задача
Додати фонове зображення на веб-сторінку, щоб воно повторювалося лише по вертикалі.
Рішення
Використовуйте властивість background зі значенням repeat-y для селектора body.
Опис
Повторення фону зазвичай потрібно для створення декоративних ліній або градієнтів, прив'язаних до висоти елемента або вікна веб-сторінки. У таких випадках повторення фону по вертикалі забезпечує цілісне зображення незалежно від розмірів елементів. Спочатку важливо переконатися, що фонове зображення повторюється без швів.
Попередньо потрібно підготувати фоновий малюнок, який повинен відповідати деяким умовам:
- займати за висотою не менше 20–30 пікселів;
- при швидкому з'єднанні з аналогічним фрагментом зображення по вертикалі не повинно бути видимих швів.
Пояснимо про висоту фонового зображення. Якщо зробити зображення занадто вузьким (2–3 пікселя), то при відображенні фону ефект його появи буде помітний невідбарно. Збільшення висоти дозволяє швидко і непомітно замостити фон елемента.
Як зразок фону, візьмемо візерунок, показаний на малюнку 1.
За повторення фону відповідає стилівська властивість background-repeat, його значення repeat-y саме й забезпечує необхідне нам повторення по вертикалі.
В якості прикладу фону візьмемо веб-сторінку, де додається властивість background до селектору body, а повторення фону по вертикалі забезпечує його значення repeat-y.
Приклад 1. Повторення фону
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Повторення фону по вертикалі</title>
<style>
body {
padding-left: 100px; /* Поле зліва */
background:
url(images/pattern-left.png) repeat-y; /* Шлях до графічного файлу та
повторення фону по вертикалі */
}
</style>
</head>
<body>
<p>Людина має вміти іноді посміятися над собою, інакше
вона зійде з розуму. Про це, на жаль, знають мало хто,
тому в світі так багато безумців.</p>
<p>Рафаель Сабаттіні</p>
</body>
</html>Результат цього прикладу показано на малюнку 2.
У цьому прикладі фон задається на веб-сторінці завдяки додаванню властивості background до селектора body, при цьому повторення фону по вертикалі забезпечує його значення repeat-y. Зазвичай фон завжди починається з лівого верхнього кута, тому у нашому випадку положення фону явно не вказувалося.