Перейти к содержанию

background-repeat

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

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

Демо

Фон

Синтаксис

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
/* One-value syntax */
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
background-repeat: space;
background-repeat: round;
background-repeat: no-repeat;

/* Two-value syntax: horizontal | vertical */
background-repeat: repeat space;
background-repeat: repeat repeat;
background-repeat: round space;
background-repeat: no-repeat round;

/* Global values */
background-repeat: inherit;
background-repeat: initial;
background-repeat: unset;

Допустимо указывать два значения, первое ключевое слово задаёт повторение по горизонтали, второе по вертикали.

Значения

no-repeat

Устанавливает одно фоновое изображение в элементе без его повторений, положение которого определяется свойством background-position (по умолчанию в левом верхнем углу). Аналогично no-repeat no-repeat.

repeat

Фоновое изображение повторяется по горизонтали и вертикали. Аналогично repeat repeat.

repeat-x

Фоновый рисунок повторяется только по горизонтали. Аналогично repeat no-repeat.

repeat-y

Фоновый рисунок повторяется только по вертикали. Аналогично no-repeat repeat.

space

Изображение повторяется столько раз, чтобы полностью заполнить область; если это не удаётся, между картинками добавляется пустое пространство.

round

Изображение повторяется так, чтобы в области поместилось целое число рисунков; если это не удаётся сделать, то фоновые рисунки масштабируются.

Значение по-умолчанию:

1
background-repeat: repeat;

Применяется ко всем элементам

Спецификации

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

Can I Use background-repeat-round-space? Data on support for the background-repeat-round-space feature across the major browsers from caniuse.com.

Описание и примеры

Пример 1

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>background-repeat</title>
        <style>
            body {
                background-image: url('/example/image/bg_grey.png'); /* Путь к фоновому рисунку */
                background-position: left bottom; /* Положение фона */
                background-repeat: repeat-x; /* Повторяем фон по горизонтали */
            }
        </style>
    </head>
    <body>
        <p>
            Даже опытному верстальщику приходится иногда
            смотреть свой код на наличие опечаток и ошибок.
            Так что не брезгуй проверять код валидатором,
            это поможет избежать множества ляпов в будущем.
        </p>
    </body>
</html>

Пример 2

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>background-repeat</title>
        <style>
            body {
                background-image: url('/example/image/pattern-left.png'),
                    url('/example/image/pattern-right.png');
                background-position: left, right;
                background-repeat: repeat-y, repeat-y;
            }
        </style>
    </head>
    <body>
        <div style="height:2000px"></div>
    </body>
</html>

Комментарии