css властивість background-repeat


Властивість background-repeat визначає як буде повторюватися фоновий малюнок, котрий встановлено за допомогою властивості background-image і як саме воно має повторюватися:

  • по горизонталі
  • по вертикалі
  • в обидва напрямки
  • чи рівномірно заповнить простір

Властивість `background-repeat`

Без задання малюнок повторюється так, щоб заповнити всю ширину та висоту блоку. Ви можете або взагалі скасувати повторення або налаштувати його тільки в потрібну сторону.

Фоновий малюнок розміщується згідно зі значеннями вказаними у властивості 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; 


}

Додаткові посилання