Свойство background-repeat в CSS

повтор изображения на фоне

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

Зависит от положения background-position. По умолчанию будет повторяться с верхнего левого угла.

Если задано 2 значения: первое будет работать по горизонтали, второе по вертикали.

Примеры

background-repeat: no-repeat;
background-repeat: repeat-x;
background-repeat: space no-repeat;

Значения

Значение Описание
repeat По умолчанию. Повторяется по горизонтали и вертикали. Изображения будут обрезаны, если выходят за края блока.
repeat-x Изображения повторяются только по горизонтали. Последнее обрезается.
repeat-y Изображения повторяются только по вертикали. Последнее обрезается.
space Изображения повторяются столько раз, чтобы влезть в размер блока без обрезания изображения. Оставшееся пространство равномерно распределяется.
round Изображения повторяются столько раз, чтобы влезть в размер блока без обрезания изображения. После чего растягиваются или сжимаются, чтобы заполнить полностью блок.
inherit Наследует значение родительского блока.
initial Устанавливает значение по умолчанию.

Поддержка браузерами

НастольныеМобильные
Chrome
Edge
Firefox
IE
Opera
Safari
Chrome
Firefox
Opera
Safari
Samsung
Android
background-repeat
1
12
1
4
3.5
1
18
4
10.1
1
1.0
37
Несколько фонов
1
12
3.6
9
10.5
1.3
18
4
11
1
1.0
37
round и space
30
12
49
9
17
10.5-15
7
30
49
18
8
2.0
≤37
2 значения (по горизонтали и вертикали)
3
12
13
9
10.5
5
18
14
11
4
1.0
≤37
Поддерживается: Да Нет
Получай полезные материалы удобным способом!
Добавить комментарий