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

Определение и применение

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

Настройка фона рассмотрена в уроке «Работа с фоном элемента в CSS».

Попробуйте значения background-repeat

Плитка 64 × 64 px. space распределяет промежутки между целыми плитками, round меняет их размер, чтобы они поместились без обрезки.

Значение свойства

background-repeat: no-repeat

HTML и CSS примера
HTML
<div class="demo-target" aria-label="Область фона"></div>
CSS
.demo-target {
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
  min-height: 180px;
  padding: 24px;
  border: 3px solid #245a85;
  border-radius: 8px;
  color: #172c3d;
  background-color: #d9edf8;
  font: 18px/1.5 system-ui;
  background-image: linear-gradient(135deg, #ef803c 50%, #245a85 50%);
  background-size: 64px 64px;
  background-repeat: no-repeat;
}

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

Спецификация: CSS backgrounds

Поддерживается во всех основных браузерах с 2015 года.

Показать браузеры
Совместимостьcss.properties.background-repeat
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
background-repeat✓1✓12✓1✓3.5✓1✓18✓4✓10.1✓1✓1.0✓4.4✓1
2-value✓3✓12✓13✓10.5✓5✓18✓14✓11✓4✓1.0✓4.4✓4
Несколько фонов✓1✓12✓3.6✓10.5✓1.3✓18✓4✓11✓1✓1.0✓4.4✓1
no-repeat✓1✓12✓1✓15✓1✓18✓4✓14✓1✓1.0✓4.4✓1
repeat✓1✓12✓1✓15✓1✓18✓4✓14✓1✓1.0✓4.4✓1
repeat-x✓1✓12✓1✓15✓1✓18✓4✓14✓1✓1.0✓4.4✓1
repeat-y✓1✓12✓1✓15✓1✓18✓4✓14✓1✓1.0✓4.4✓1
round✓30✓12✓49✓17✓8✓30✓49✓18✓8✓2.0✓4.4✓8
space✓30✓12✓49✓17✓8✓30✓49✓18✓8✓2.0✓4.4✓8

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

CSS синтаксис:

CSS
background-repeat: [ repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1,2} ]#;

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

| разделяет варианты. # — одно или несколько значений через запятую для фоновых слоёв. Квадратные скобки группируют части записи. {1,2} — одно или два значения.

JavaScript синтаксис:

JavaScript
element.style.backgroundRepeat = "repeat-y";

Начальное значение свойства

repeat.

Значения свойства

Значения background-repeat
Значение Описание
repeat Фоновое изображение будет повторяться как по вертикали, так и по горизонтали. Начальное значение.
repeat-x Фоновое изображение будет повторяться по горизонтали (по оси x).
repeat-y Фоновое изображение будет повторяться по вертикали (по оси y).
no-repeat Фоновое изображение не будет повторяться.
space Размещает целое число плиток без обрезки и распределяет свободное место между ними. Крайние плитки прижаты к краям области позиционирования. Если помещается только одна плитка, её положение задаёт background-position.
round Изменяет размер повторяемых плиток так, чтобы в области позиционирования помещалось целое их число.
Два значения Первое задаёт повторение по горизонтали, второе — по вертикали. Например, space no-repeat.
initial Устанавливает начальное значение свойства.
inherit Наследует вычисленное значение свойства у родительского элемента.
unset Для ненаследуемого свойства background-repeat устанавливает его начальное значение.
revert Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS.
revert-layer Сбрасывает значение свойства для текущего слоя каскада @layer. Применяется значение из другого слоя по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.

Для нескольких фоновых изображений значения перечисляют через запятую в порядке background-image: первый слой находится сверху. Короткий список повторяется до числа изображений, лишние значения не используются.

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

CSS Backgrounds and Borders Module Level 3.

Наследуется

Нет.

Анимируемое

Тип анимации — дискретный: значение переключается без плавных промежуточных положений.

Примеры, попробуйте сами

Повторение изображения

Сравните repeat и no-repeat. Попробуйте repeat-x, repeat-y, space и round во втором блоке. При round размер плиток подстраивается, при space между ними появляются промежутки.

base.css
CSS
* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.4 system-ui,
        sans-serif;
    color: #172c3d;
}
.comparison {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    gap: 16px;
}
h3 {
    font-size: 16px;
    margin: 0 0 8px;
}
section {
    min-width: 0;
    background: repeating-conic-gradient(#fff 0% 25%, #e1e7ed 0% 50%) 0 / 20px 20px;
}
.sample {
    min-height: 190px;
    border: 1px solid #607589;
}
index.html
HTML
<div class="comparison">
  <section>
    <h3>Вариант A</h3>
    <div class="sample"></div>
  </section>
  <section>
    <h3>Вариант B</h3>
    <div class="sample second"></div>
  </section>
</div>
style.css
CSS
.sample {
    background-image: url('assets/tile.svg');
    background-size: 64px 40px;
    background-repeat: repeat;
}
.second {
    background-repeat: no-repeat;
}