background-repeat CSS

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

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

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

repeat

Наследуется:
Нет
Применяется:

Ко всем элементам

Анимируется:
Нет
Объект JavaScript:

object.style.backgroundRepeat

Спецификации:
Поддержка браузерами:

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

Синтаксис

/* 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

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