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

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

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

 

Синтаксис

/*Ключевые значения*/
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

<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

/* Совместно для всех DIVS в примере */
li {margin-bottom: 12px;}
div {
    background-image: url(https://mdn.mozillademos.org/files/12005/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(https://mdn.mozillademos.org/files/12005/starsolid.gif),
                       url(https://developer.cdn.mozilla.net/media/redesign/img/favicon32.png);
    background-repeat: repeat-x,
                       repeat-y;
    height: 144px;
}

Результат

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

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

Спецификация Статус Комментарий
CSS Backgrounds and Borders Module Level 3
Определение 'background-repeat' в этой спецификации.
Кандидат в рекомендации Добавлена поддержка изображений с несколькими фонами, синтаксис с двумя значениями, обеспечивающий различное поведение повторения для горизонтального и вертикального направлений, ключевых слов space и round, а также для фона на элементе на уровне строки путем точного определения области рисования фона.
CSS Level 2 (Revision 1)
Определение 'background-repeat' в этой спецификации.
Рекомендация Без существенных изменений
CSS Level 1
Определение 'background-repeat' в этой спецификации.
Рекомендация  
Начальное значениеrepeat
Применяется квсе элементы. Это также применяется к ::first-letter и ::first-line.
Наследуетсянет
Отображениевизуальный
Обработка значениясписок, каждый элемент которого содержит 2 ключевых слова, по одному на размер
Animation typediscrete
Канонический порядокуникальный неоднозначный порядок, определённый формальной грамматикой

Поддержка браузеров

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
background-repeatChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка 4Opera Полная поддержка 3.5Safari Полная поддержка 1WebView Android Полная поддержка 37Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android Полная поддержка 10.1Safari iOS Полная поддержка 1Samsung Internet Android Полная поддержка 1.0
Multiple backgroundsChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 3.6IE Полная поддержка 9Opera Полная поддержка 10.5Safari Полная поддержка 1.3WebView Android Полная поддержка 37Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android Полная поддержка 11Safari iOS ? Samsung Internet Android ?
Two-value syntax (different values for x & y directions)Chrome Полная поддержка 3Edge Полная поддержка 12Firefox Полная поддержка 13IE Полная поддержка 9Opera Полная поддержка ДаSafari Полная поддержка 4.1WebView Android Полная поддержка ДаChrome Android Полная поддержка 18Firefox Android Полная поддержка 14Opera Android Полная поддержка ДаSafari iOS Полная поддержка 4Samsung Internet Android Полная поддержка 1.0
round and space keywordsChrome Полная поддержка 30Edge Полная поддержка 12Firefox Полная поддержка 49IE Полная поддержка 9Opera Полная поддержка 17
Полная поддержка 17
Нет поддержки 10.5 — 15
Safari Полная поддержка 7WebView Android Полная поддержка ДаChrome Android Полная поддержка 30Firefox Android Полная поддержка 49Opera Android Полная поддержка 18Safari iOS Полная поддержка 8Samsung Internet Android Полная поддержка 2.0

Легенда

Полная поддержка  
Полная поддержка
Совместимость неизвестна  
Совместимость неизвестна

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

 

Метки документа и участники

Внесли вклад в эту страницу: mdnwebdocs-bot, Akh-rman, Rammfall, Roman-Kosov, SphinxKnight, teoli, piar.tattoo@gmail.com
Обновлялась последний раз: mdnwebdocs-bot,