Пояснення тегів та прикладів CSS background-repeat
Опція background-repeat в CSS визначає, як фонове зображення буде повторюватись на веб-сторінці. Можна вказати повторення лише горизонтально, вертикально або в обох напрямках. У CSS3 можна вказати кілька значень для кожного фону, перераховуючи їх через кому.
Синтаксис
background-repeat: no-repeat | repeat | repeat-x | repeat-y | inherit
Тут:
<повторення> = repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}
Дозволяється вказувати два значення, перше ключове слово визначає повторення горизонтально, друге - вертикально.
Значення
- no-repeat
- Встановлює фонове зображення в елементі без повторень, позиція якого визначається властивістю background-position. Аналогічно no-repeat no-repeat.
- repeat
- Фонове зображення повторюється по горизонталі та вертикалі. Аналогічно repeat repeat.
- repeat-x
- Фонове зображення повторюється лише по горизонталі. Аналогічно repeat no-repeat.
- repeat-y
- Фонове зображення повторюється лише по вертикалі. Аналогічно no-repeat repeat.
- inherit
- Наслідує значення батька.
- space
- Зображення повторюється, щоб повністю заповнити область; якщо цього не вдається зробити, між картинками додається порожній простір.
- round
- Зображення повторюється так, щоб в області помістилося ціле число рисунків; якщо цього не вдається зробити, то фонові зображення масштабуються.
Приклади
Приклад 1
<style>
body {
background-image: url(images/bg_grey.png);
background-position: left bottom;
background-repeat: repeat-x;
}
</style>Результат показано на відповідному малюнку.
Приклад 2
<style>
body {
background-image: url(images/pattern-left.png), url(images/pattern-right.png);
background-position: left, right;
background-repeat: repeat-y, repeat-y;
}
</style>Об'єктна модель
[window.]document.getElementById("elementID").style.backgroundRepeat
Підтримка браузерами
Internet Explorer до версії 7.0 не підтримує значення inherit.
Значення round та space підтримуються лише в IE9 та Opera 11.0.