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

Фонове зображення повторюється по горизонталі і вертикалі.

автор: Svitlana

правити

repeat-x

Фоновий малюнок повторюється тільки по горизонталі.

автор: Svitlana

правити

repeat-y

Фоновий малюнок повторюється тільки по вертикалі.

автор: Svitlana

правити

no-repeat

Встановлює фонове зображення в елементі без його повторень, положення якого визначається властивістю background-position.

автор: Svitlana

правити

space

Зображення повторюється стільки раз, щоб повністю заповнити область; якщо це не вдається, між картинками додається порожній простір

автор: Svitlana

правити

round

Зображення повторюється так, щоб в області помістилося ціле число малюнків; якщо це не вдається зробити, то фонові малюнки масштабуються

автор: Svitlana

правити

initial

Встановлює властивість у значення без задання

автор: Svitlana

правити

inherit

Вказує на спадковість властивості від свого батьківського елемента

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
одне тло	1.0	1.0	1.0	3.5	4.0
декілька тла	1.0	3.6	1.3	10.5	9.0

Підтримка: мобільні переглядачі

Переглядач
одне тло	2.1	1.0	3.2
декілька тла	2.1	1.0	3.2

Приклади

+ запропонувати свій приклад у пісочниці

<div class="box">repeat (типово)</div>
<div class="box once">no-repeat</div>

.box {
    height: 90px;
    margin-bottom: 8px;
    border: 1px solid #999;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Ccircle cx='13' cy='13' r='12' fill='%230172ad'/%3E%3C/svg%3E");
}

.once {
    background-repeat: no-repeat;
}