CSS-свойство background-repeat
background-repeat — CSS-свойство, задающее повторение фонового изображения. Изучите значения и примеры использования.
Свойство background-repeat управляет тем, как фоновое изображение повторяется (мозаично заполняет) область отрисовки элемента. По умолчанию фоновое изображение слишком мало, чтобы покрыть весь элемент, поэтому браузер повторяет его, как обои, — по обеим осям, — пока блок не заполнится.
На этой странице рассмотрены все значения background-repeat, когда каждое из них уместно, а также тонкая разница между space и round — двумя значениями, в которых чаще всего путаются.
Значения делятся на три группы:
- Повторять или нет:
repeat(значение по умолчанию) повторяет изображение по обоим направлениям;no-repeatпоказывает изображение один раз. - Повторять по одной оси:
repeat-x— только горизонтально;repeat-y— только вертикально. - Повторять без обрезки плиток:
spaceсохраняет каждую плитку целой и распределяет лишнее пространство в виде равных отступов между ними;roundрастягивает или сжимает плитки так, чтобы целое число плиток точно заполнило область без промежутков.
background-repeat работает совместно с background-image (задаёт изображение) и background-position (задаёт начальную точку мозаики). Это свойство также можно указать в сокращённом свойстве background.
Когда это использовать?
no-repeatчаще всего применяется в современных макетах — для единственного фонового фото, логотипа или иконки, которые затем масштабируются черезbackground-sizeи позиционируются черезbackground-position.repeatидеально подходит для бесшовных текстур и паттернов (бумажное зерно, шум, сетки точек), которые должны заполнять блок любого размера.repeat-x/repeat-yподходят для декоративных полос: повторяющейся верхней границы, вертикального разделителя или градиента, который должен повторяться по одной оси.space/roundважны, когда у изображения чёткие края (например, плитки или миниатюры) и нельзя допустить их обрезки на краю блока.
By default, the image will be displayed in the top left corner without background-position property.
| Initial Value | repeat |
|---|---|
| Applies to | All elements. It also applies to ::first-letter and ::first-line. |
| Inherited | No. |
| Animatable | No. |
| Version | CSS1 |
| DOM Syntax | element.style.backgroundRepeat = "repeat-x"; |
Синтаксис
Синтаксис CSS-свойства background-repeat
background-repeat: repeat | repeat-x | repeat-y | no-repeat | space | round | initial | inherit;Пример свойства background-repeat:
Пример CSS-свойства background-repeat со значением repeat
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-image: url("/uploads/media/default/0001/02/668fdd72934232cdeff7a45a89be805113c916b5.jpeg");
background-repeat: repeat;
}
</style>
</head>
<body>
<h2>This is some heading for an example.</h2>
<p>Some paragraph for an example.</p>
</body>
</html>Результат
В следующем примере фоновое изображение отображается только один раз, поскольку установлено значение no-repeat.
Пример свойства background-repeat со значением "no-repeat":
Пример CSS-свойства background-repeat со значением no-repeat
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-image: url("/uploads/media/default/0001/02/668fdd72934232cdeff7a45a89be805113c916b5.jpeg");
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h2>This is some heading for an example.</h2>
<p>Some paragraph for an example.</p>
</body>
</html>В следующем примере фоновое изображение повторяется только горизонтально.
Пример свойства background-repeat со значением "repeat-x":
Пример CSS-свойства background-repeat со значением repeat-x
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-image: url("/uploads/media/default/0001/02/668fdd72934232cdeff7a45a89be805113c916b5.jpeg");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<h2>This is some heading for an example.</h2>
<p>Some paragraph for an example.</p>
</body>
</html>Здесь значение "repeat-y" заставляет изображение повторяться только по вертикали.
Пример свойства background-repeat со значением "repeat-y":
Пример CSS-свойства background-repeat со значением repeat-y
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-image: url("/uploads/media/default/0001/02/668fdd72934232cdeff7a45a89be805113c916b5.jpeg");
background-repeat: repeat-y;
}
</style>
</head>
<body>
<h2>This is some heading for an example.</h2>
<p>Some paragraph for an example.</p>
</body>
</html>При значении space изображение сохраняет исходный размер — браузер размещает столько целых плиток, сколько помещается, и распределяет оставшееся пространство в виде равных промежутков между ними, так что ни одна плитка не обрезается.
Пример свойства background-repeat со значением "space":
Пример CSS-свойства background-repeat со значением space
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-image: url("/uploads/media/default/0001/02/668fdd72934232cdeff7a45a89be805113c916b5.jpeg");
background-repeat: space;
}
</style>
</head>
<body>
<h2>This is some heading for an example.</h2>
<p>Some paragraph for an example.</p>
</body>
</html>При значении round промежутков нет вовсе: браузер масштабирует изображение вверх или вниз так, чтобы целое число плиток точно заполнило область. Это может незначительно искажать изображение — именно такой компромисс делает round, чтобы избежать промежутков.
Пример свойства background-repeat со значением "round":
Пример CSS-свойства background-repeat со значением round
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-image: url("/uploads/media/default/0001/02/668fdd72934232cdeff7a45a89be805113c916b5.jpeg");
background-repeat: round;
}
</style>
</head>
<body>
<h2>This is some heading for an example.</h2>
<p>Some paragraph for an example.</p>
</body>
</html>Значения
| Значение | Описание | Пример |
|---|---|---|
| repeat | Фоновое изображение повторяется горизонтально и вертикально. Это значение по умолчанию. | Пример » |
| repeat-x | Фоновое изображение повторяется только горизонтально. | Пример » |
| repeat-y | Фоновое изображение повторяется только вертикально. | Пример » |
| no-repeat | Фоновое изображение не повторяется. | Пример » |
| space | Изображение повторяется столько раз, сколько целых копий умещается без обрезки; оставшееся пространство распределяется в виде равных отступов между плитками (первая и последняя плитки касаются краёв). | Пример » |
| round | Изображение масштабируется так, чтобы целое число плиток заполнило область без промежутков; плитки растягиваются или сжимаются до нужного размера. | Пример » |
| initial | Устанавливает свойство в значение по умолчанию. | Пример » |
| inherit | Наследует свойство от родительского элемента. |
Типичные ошибки
spaceиround— полноправные значения. Оба входят в стандарт и обеспечивают мозаику без обрезки плиток —spaceдобавляет промежутки,roundмасштабирует изображение.no-repeatне изменяет размер изображения. Чтобы одно изображение покрывало блок, сочетайтеno-repeatс background-size.- Позиция определяет начало мозаики. При повторении
background-positionсмещает всю сетку плиток, поэтому два варианта мозаики могут выглядеть по-разному даже с одним и тем же изображением — задавайте background-position осознанно. - Существует и двузначный синтаксис. Можно указать одно ключевое слово на каждую ось, например
background-repeat: repeat-x;эквивалентноbackground-repeat: repeat no-repeat;.