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

Властивість background-repeat задає як повторювати фонову картинку елемента. За умовчанням картинка повторюється і осі X, і осі Y, таким чином покриваючи собою всю доступну область.

Синтаксис

Значення

Значення за замовчуванням: repeat – покриває візерунком весь екран.

приклад

За замовчуванням фонова картинка замостить собою весь елемент:

приклад

Давайте зробимо так, щоб картинка не повторювалася:

приклад

А тепер нехай картинка повторюється по осі X:

приклад

приклад

Повторювані по осях картинки можна позиціонувати за допомогою властивості background-position:

приклад

Подивимося, як працює значення space :

приклад

Подивимося, як працює значення round:

CSS Background Repeat - Повторення фону

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

Деякі зображення слід повторювати лише по горизонталі або вертикалі, інакше вони виглядатимуть дивно, як це:

приклад

Якщо зображення вище повторюється тільки по горизонталі (background-repeat: repeat-x; ), фон буде виглядати краще:

приклад

Порада: Щоб повторити зображення по вертикалі, установіть background-repeat: repeat-y;

CSS background-repeat: no-repeat

Відображення фонового зображення лише один раз також визначається властивістю background-repeat:

приклад

Показати фонове зображення лише один раз:

У наведеному вище прикладі фонове зображення міститься у те місце, як і текст. Ми хочемо змінити положення зображення, щоб воно не надто заважало тексту.

CSS background-position

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

приклад

Розмістіть фонове зображення у верхньому правому кутку:

body <
background-image: url("../images/img_tree.png");
background-repeat: no-repeat;
background-position: right top;
>

ПАЛІТРА КОЛЬОРІВ

ПРИЄДНУЙТЕСЯ!

Отримайте ваш
Сертифікат сьогодні!

Зв'язок з адміном

Якщо ви хочете повідомити про помилку, а також внести пропозицію про роботу сайту, додати оголошення або рекламу на сайт, не соромтеся надіслати адміну електронного листа на email:

Топ Підручники

Топ Довідники

Топ Приклади

Веб Сертифікати

Цей сайт оптимізовано для навчання та тестування. Приклади можуть бути спрощені для покращення читання та базового розуміння. Навчальні посібники, посилання та приклади постійно переглядаються, щоб уникнути помилок, але ми не можемо гарантувати повну правильність та працездатність всього контенту. Використовуючи цей сайт, ви погоджуєтесь з тим, що прочитали та прийняли умови використання, cookie та політику конфіденційності.
Також ви можете абсолютно безкоштовно скачати офлайн версію сайту W3Schools російською архівом з GitHub та користуватися локально на своєму комп'ютері.
Також доступна версія сайту W3Schools українською мовою.
Copyright 1999-2021 by Refsnes Data. All Rights Reserved.
Сайт працює на фреймворку W3.CSS.

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;
>


Копіювати
Скопійовано
Не вдалося скопіювати