background-repeat

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

Интерактивный пример

Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на извлечение.

По умолчанию, изображения обрезаются по размеру элемента, но их можно масштабировать (используя round) или равномерно растянуть от конца к концу (используя space).

Синтаксис

css
/* Ключевые слова */
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
background-repeat: space;
background-repeat: round;
background-repeat: no-repeat;

/*Два значения: горизонтальное | вертикальное*/
background-repeat: repeat space;
background-repeat: repeat repeat;
background-repeat: round space;
background-repeat: no-repeat round;

/* Глобальные значения */
background-repeat: inherit;
background-repeat: initial;
background-repeat: unset;

Значения

<repeat-style>

Следующие однозначные имеют двухзначные эквиваленты:

repeat-x тоже самое, что и repeat no-repeat
repeat-y тоже самое, что и no-repeat repeat
repeat тоже самое, что и repeat repeat
space тоже самое, что и space space
round тоже самое, что и round round
no-repeat тоже самое, что и no-repeat no-repeat

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

repeat Изображения повторяются столько, сколько необходимо, чтобы полностью покрыть область элемента, последнее обрезается, если не хватает места.
space Изображение повторяется в заданном направлении столько раз, сколько необходимо, чтобы покрыть большую часть области рисования фонового изображения, не обрезая изображение. Оставшееся незакрытое пространство равномерно распределено между изображениями. Первое и последнее изображения касаются края элемента. Значение CSS-свойства background-position игнорируется для рассматриваемого направления, за исключением случаев, когда отдельное изображение больше области рисования фонового изображения, что является единственным случаем, когда изображение может быть обрезано, когда используется значение space.
round Изображение повторяется в заданном направлении столько раз, сколько необходимо, чтобы покрыть большую часть области рисования фонового изображения, не обрезая изображение. Если оно не покрывает точно область, плитки изменяются в этом направлении, чтобы соответствовать ей.
no-repeat Изображение не повторяется (и, следовательно, область рисования фонового изображения не обязательно будет полностью покрыта). Расположение неповторяющегося фонового изображения определяется CSS-свойством background-position.

Примеры

HTML

html
<ol>
  <li>
    no-repeat
    <div class="one">&nbsp;</div>
  </li>
  <li>
    repeat
    <div class="two">&nbsp;</div>
  </li>
  <li>
    repeat-x
    <div class="three">&nbsp;</div>
  </li>
  <li>
    repeat-y
    <div class="four">&nbsp;</div>
  </li>
  <li>
    repeat-x, repeat-y (multiple images)
    <div class="five">&nbsp;</div>
  </li>
</ol>

CSS

css
/* Совместно для всех DIVS в примере */
li {
  margin-bottom: 12px;
}
div {
  background-image: url(starsolid.gif);
  width: 144px;
  height: 84px;
}

/* повторение фона CSS */
.one {
  background-repeat: no-repeat;
}
.two {
  background-repeat: repeat;
}
.three {
  background-repeat: repeat-x;
}
.four {
  background-repeat: repeat-y;
}

/* Несколько изображений */
.five {
  background-image: url(starsolid.gif),
    url(https://developer.mozilla.org/static/img/favicon32.png);
  background-repeat: repeat-x, repeat-y;
  height: 144px;
}

Результат

В этом примере каждому элементу списка соответствует другое значение background-repeat.

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

Specification
CSS Backgrounds and Borders Module Level 3
# the-background-repeat
Начальное значениеrepeat
Применяется квсе элементы. Это также применяется к ::first-letter и ::first-line.
Наследуетсянет
Обработка значениясписок, каждый элемент которого содержит 2 ключевых слова, по одному на размер
Animation typediscrete

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также