Як зробити, щоб фон не повторювався?
За замовчуванням фонова картинка повторюється по горизонталі та вертикалі, шикуючись мозаїкою по всьому елементу. Така поведінка не завжди потрібна, часто картинка використовується для стилізації і повинна виводитися лише один раз. Для цього до властивості background-repeat додається значення no-repeat, як показано в прикладі 1.
Приклад 1. Фон веб-сторінки
Тут фонове зображення виводиться для всієї веб-сторінки, тому стильові властивості додаються до селектора body. Результат цього прикладу показано на рис. 1.
Мал. 1. Фонове зображення на веб-сторінці без повторення
Див. також
background - repeat
За допомогою цієї властивості та невеликої картинки можна створювати красиві патерни на фоні.
Час читання: менше 5 хв
Оновлено 17 травня 2022
Коротко
Скопіювати посилання "Коротко" Скопійовано
Властивість background – repeat управляє повтором фонового зображення. За замовчуванням значення цієї властивості — repeat, тобто фонова картинка повторюватиметься по вертикалі та горизонталі.
приклад
Скопіювати посилання "Приклад" Скопійовано
div
class="element">div>
.element height: 100vh;
background-image: url(images/pattern.png);
background-size: 64px auto;>
.element
height:
100vh;
background-image:
url(images/pattern.png);
background-size:
64px auto;
>
Вийшов гарний патерн. Зображення повторюється по горизонталі та по вертикалі.
Змінимо значення на repeat-x:
.element background-repeat: repeat-x;>
.element
background-repeat: repeat-x;
>
Тепер картинка повторюється лише по горизонталі. Аналогічно можна повторити картинку по вертикалі за допомогою значення repeat-y.
Але найчастіше у роботі зустрічається значення no-repeat. З таким значенням фонова картинка не повторюватиметься ні по горизонталі, ні по вертикалі.
Як пишеться
Скопіювати посилання "Як пишеться" Скопійовано
Як значення властивості background - repeat використовуються такі ключові слова:
- no - repeat - фонове зображення не повторюється, залишається лише одне всередині елемента.
- repeat - зображення повторюється і по горизонталі, і по вертикалі доти, доки не заповнить всю площу елемента (значення за замовчуванням).
- repeat - x – фон повторюється по горизонталі.
- repeat – y – фон повторюється по вертикалі.
- space — зображення повторюється, доки не заповнить весь елемент. При цьому, якщо за розмірами не вдається повторити зображення без обрізки, між картинками додається рівний простір. Вкрай рідко потрібно в роботі.
- round – зображення повторюється так, щоб заповнити весь елемент. Але картинка не обрізається, повторюється багато разів. Якщо це не вдається, то картинка масштабується. Вкрай рідко потрібно в роботі.
Ключові слова repeat і no – repeat можна комбінувати, щоб керувати повтореннями по горизонталі (перше значення) та по вертикалі (друге значення). Але простіше вказувати спеціальні ключові слова repeat-x та repeat-y.
Підказки
Скопіювати посилання "Підказки" Скопійовано
💡 Властивість не успадковується.
💡 Значення за замовчуванням – repeat.
💡 Найчастіше для повноекранних фонів вказується значення no-repeat.
💡 Властивість background - repeat не можна анімувати 😒
На практиці
Скопіювати посилання "На практиці" Скопійовано
Олена Батицька радить
Скопіювати посилання "Олена Батицька радить" Скопійовано
background - repeat - властивість просте. Написано повторювати - повторюємо тло. Написано не повторювати – не повторюємо.
🛠 За допомогою повторення фону та лінійного градієнта (linear-gradient) можна створювати смугасті фони.
div
class="element">div>
.element height: 100vh;
background-image: linear-gradient(
#49a16c 50px,
#064236 0
);
background-size: 100% 100px;
background-repeat: repeat-y;>
.element
height:
100vh;
background-image:
linear-gradient(
#49a16c
50px,
#064236
0
);
background-size:
100%
100px;
background-repeat: repeat-y;
>
