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

background-repeat — это CSS-сокращённое свойство, которое задаёт способ повторения фоновых изображений. Фоновое изображение можно повторять по горизонтальной и вертикальной осям либо не повторять вовсе.

Попробуйте

background-repeat: repeat-x;

background-repeat: repeat;

background-repeat: space;

background-repeat: round;

background-repeat: no-repeat;

background-repeat: space repeat;

<section id="default-example">
  <div id="example-element"></div>
</section>

#example-element {
  background: #cccccc url("/shared-assets/images/examples/moon.jpg") center /
    120px;
  min-width: 100%;
  min-height: 100%;
}

Составные свойства

Это свойство является сокращённой записью следующих свойств CSS:

• background-repeat-x
• background-repeat-y

Синтаксис

/* Keyword values */
background-repeat: repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
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: revert;
background-repeat: revert-layer;
background-repeat: unset;

Описание

Свойство принимает список из двух ключевых слов <repeat-style>, разделённых запятыми, или одно ключевое слово в качестве сокращённой записи двух значений. Если заданы два значения, первое определяет поведение повторения по горизонтали, а второе — по вертикали. Значения свойства позволяют повторять изображение только по горизонтали, только по вертикали или не повторять вовсе.

Значение по умолчанию — repeat repeat. При этом значении фоновое изображение сохраняет исходное соотношение сторон и повторяется по горизонтали и вертикали, покрывая всю область отрисовки фона; изображения у краёв обрезаются по размеру элемента. То, какие края будут обрезаны, зависит от значения соответствующего свойства background-position. Количество повторений и степень обрезки изображений у краёв зависят от размера области отрисовки фона и значения соответствующего свойства background-size.

Повторяющиеся изображения можно равномерно распределить, сохранив их соотношение сторон и избежав обрезки. При значении space, если соотношение сторон области отрисовки фона отличается от соотношения сторон изображения или размеры области не кратны размеру фона ни по одному из направлений, останутся участки, не покрытые фоновым изображением.

Другой вариант — растянуть повторяющееся фоновое изображение, чтобы покрыть всю область без обрезки. При значении round повторяющееся изображение растягивается, заполняя всё доступное пространство, пока не появится место для ещё одного изображения, если соотношение сторон фонового изображения отличается от соотношения сторон области отрисовки. Например, если размер фонового изображения составляет 100px × 100px, а область отрисовки фона — 1099px × 750px, изображение будет повторено 10 раз по горизонтали и 7 раз по вертикали, всего 70 раз. Каждое изображение растянется в обоих направлениях до размера 109,9px × 105px, что изменит его соотношение сторон и может привести к искажению. Если ширина области отрисовки увеличится на 1px и составит 1100px, по горизонтали поместится 11-е изображение, а общее количество повторений достигнет 77. Ширина каждого изображения составит 100px, а высота — 105px: оно будет растянуто только по вертикали.

Значения

Свойство принимает список из двух ключевых слов <repeat-style>, разделённых запятыми, или одно ключевое слово в качестве сокращённой записи двух значений. Первое значение задаёт повторение по горизонтали, второе — поведение по вертикали. Если задано только одно значение, отличное от repeat-x или repeat-y, оно применяется к обеим осям. Возможны следующие значения:

repeat

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

no-repeat

Изображение не повторяется (поэтому область отрисовки фона может быть покрыта не полностью). Положение неповторяющегося фонового изображения задаётся свойством CSS background-position.

space

Изображение повторяется максимально возможное число раз без обрезки. Первое и последнее изображения прижимаются к противоположным краям элемента, а пустое пространство равномерно распределяется между изображениями. Свойство background-position игнорируется, если только одно изображение можно отобразить без обрезки. При значении space обрезка происходит только в том случае, если места недостаточно даже для одного изображения.

round

По мере увеличения доступного пространства повторяющиеся изображения растягиваются (без промежутков), пока не появится место для добавления ещё одного. Это единственное значение <repeat-style>, которое может привести к искажению соотношения сторон фонового изображения. Искажение возникает, если соотношение сторон фонового изображения отличается от соотношения сторон области отрисовки фона.

repeat-x

Сокращённая запись для repeat no-repeat: фоновое изображение повторяется только по горизонтали. Если ширина области отрисовки не кратна ширине фонового изображения, крайнее изображение обрезается.

repeat-y

Сокращённая запись для no-repeat repeat: фоновое изображение повторяется только по вертикали. Если высота области отрисовки не кратна высоте фонового изображения, крайнее изображение обрезается.

Если указано одно ключевое слово <repeat-style>, оно является сокращённой записью следующего синтаксиса с двумя значениями:

Формальное определение

Формальный синтаксис

background-repeat = 
  <repeat-style>#

<repeat-style> = 
  repeat-x |
  repeat-y |
  [ repeat | space | round | no-repeat ]{1,2}

Примеры

Настройка background-repeat

HTML

<ol>
  <li>
    no-repeat
    <div class="one"></div>
  </li>
  <li>
    repeat
    <div class="two"></div>
  </li>
  <li>
    repeat-x
    <div class="three"></div>
  </li>
  <li>
    repeat-y
    <div class="four"></div>
  </li>
  <li>
    space
    <div class="five"></div>
  </li>
  <li>
    round
    <div class="six"></div>
  </li>
  <li>
    repeat-x, repeat-y (multiple images)
    <div class="seven"></div>
  </li>
</ol>

CSS

/* Shared for all DIVS in example */
ol,
li {
  margin: 0;
  padding: 0;
}
li {
  margin-bottom: 12px;
}
div {
  background-image: url("star-solid.gif");
  width: 160px;
  height: 70px;
}

/* Background repeats */
.one {
  background-repeat: no-repeat;
}
.two {
  background-repeat: repeat;
}
.three {
  background-repeat: repeat-x;
}
.four {
  background-repeat: repeat-y;
}
.five {
  background-repeat: space;
}
.six {
  background-repeat: round;
}

/* Multiple images */
.seven {
  background-image:
    url("star-solid.gif"), url("/shared-assets/images/examples/favicon32.png");
  background-repeat: repeat-x, repeat-y;
  height: 144px;
}

Результат

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

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

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

См. также

• Другие компоненты сокращённого свойства background: background-attachment, background-clip, background-color, background-image, background-origin, background-position (background-position-x и background-position-y), а также background-size
• Использование нескольких фонов
• Модуль фонов и границ CSS
• Понимание соотношений сторон