skip to main content

background-repeat

css

Кратко 🔗

Свойство background-repeat управляет тем, будет ли повторяться фоновое изображение. По умолчанию значение у этого свойства repeat. Значит фоновая картинка будет повторяться по вертикали и по горизонтали.

Пример 🔗

HTML

<div class="element"></div>

CSS

.element {
height: 100vh;
background-image: url(pattern.png);
background-size: 64px auto; /* Размер изображения */
}

Получился красивый паттерн. Изображение повторяется по горизонтали и по вертикали.

Изменим значение по умолчанию на repeat-x

.element {
...
background-repeat: repeat-x;
}

Теперь картинка повторяется только горизонтали. Аналогично можно повторить картинку по вертикали при помощи значения repeat-y.

Но чаще всего в работе встречается значение no-repeat. С таким значением фоновая картинка не будет повторяться ни по горизонтали ни по вертикали.

Как это понять 🔗

Слово 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 — свойство простое. Написано повторять — повторяем фон. Написано не повторять — не повторяем.

🛠 Чаще всего в работе встречается значение свойства background-repeat: no-repeat.

🛠 Повторение фона может пригодиться, если создаётся паттерн в качестве фона как в примере.

🛠 С помощью повторения фона и линейного градиента (linear-gradient) можно создавать полосатые фоны.

HTML

<div class="element"></div>

CSS

.element {
height: 100vh;
background-image: linear-gradient(
#49a16c 50px,
#064236 0
); /* Линейный градиент */
background-size: auto 100px; /* Размер фона: 50 пикселей серая полоска
+ 50 пикселей чёрная полоска */

background-repeat: repeat-y; /* Повторяем фон по вертикали */
}

Автор: Алёна,