background-repeat¶

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

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

Демо¶

Фон

Синтаксис¶

/* 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: Изображение повторяется так, чтобы в области поместилось целое число рисунков; если это не удаётся сделать, то фоновые рисунки масштабируются.

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

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¶

<!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¶

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