css властивість background-repeat
Властивість background-repeat визначає як буде повторюватися фоновий малюнок, котрий встановлено за допомогою властивості background-image і як саме воно має повторюватися:
- по горизонталі
- по вертикалі
- в обидва напрямки
- чи рівномірно заповнить простір
Без задання малюнок повторюється так, щоб заповнити всю ширину та висоту блоку. Ви можете або взагалі скасувати повторення або налаштувати його тільки в потрібну сторону.
Фоновий малюнок розміщується згідно зі значеннями вказаними у властивості background-position. Якщо ніяке значення не вказане, фон розміщується у верхньому лівому кутку.
Припустимо вказувати кілька значень для кожного тла, перераховуючи значення через кому. при цьому послідовність переліку має бути такою ж яку ти задав у background-image.
Синтаксис
background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|space|round|inherit;Властивість background-repeat може отримувати 8 значень:
repeatФонове зображення повторюється по горизонталі і вертикалі.
repeat-xФоновий малюнок повторюється тільки по горизонталі.
repeat-yФоновий малюнок повторюється тільки по вертикалі.
no-repeatВстановлює фонове зображення в елементі без його повторень, положення якого визначається властивістю
background-position.spaceЗображення повторюється стільки раз, щоб повністю заповнити область; якщо це не вдається, між картинками додається порожній простір
roundЗображення повторюється так, щоб в області помістилося ціле число малюнків; якщо це не вдається зробити, то фонові малюнки масштабуються
initialВстановлює властивість у значення без задання
inheritВказує на спадковість властивості від свого батьківського елемента
| Значення без задання: | repeat |
|---|---|
| Наслідує: | Ні |
| Анімується: | Ні |
| JavaScript синтаксис: | object.style.backgroundRepeat="repeat-x" |
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
| одне тло | 1.0 |
4.0 |
1.0 |
1.0 |
3.5 |
| декілька тла | 1.0 |
9.0 |
3.6 |
1.3 |
10.5 |
| Переглядач | |||
|---|---|---|---|
| одне тло | 2.1 |
1.0 |
3.2 |
| декілька тла | 2.1 |
1.0 |
3.2 |
Мобільних переглядачів ще не додано.
Приклади
Динамічний приклад
Демонстрація роботи властивості
Тут наочно показано як змінюється поведінка тла при різних значеннях властивості background-repeat
Синтаксис
.box {
background-image: url(image.png);
background-repeat: no-repeat;
}