Свойство CSS background-repeat
Свойство background-repeat используется для определения того, как должно повторяться фоновое изображение. По умолчанию фоновое изображение повторяется и по горизонтали, и по вертикали. Если задано значение "repeat-x", изображение будет повторяться только по горизонтали. Если задано значение "repeat-y", изображение будет повторяться только по вертикали. Есть ещё два значения: "space" и "round". "Space" повторяет изображение без обрезки, а "round" — без промежутков.
Нам нужно использовать свойство background-repeat вместе со свойствами background-image и background-position.
INFO
По умолчанию изображение будет отображаться в левом верхнем углу без свойства background-position.
| 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("https://ru.w3docs.com/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>Результат
В следующем примере фоновое изображение не повторяется.
Пример свойства background-repeat со значением "no-repeat":
Пример свойства CSS background-repeat со значением no-repeat
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-image: url("https://ru.w3docs.com/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("https://ru.w3docs.com/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("https://ru.w3docs.com/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>Давайте попробуем пример, в котором фоновое изображение повторяется без обрезки.
Пример свойства background-repeat со значением "space":
Пример свойства CSS background-repeat со значением space
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-image: url("https://ru.w3docs.com/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>В следующем примере применённое значение делает так, что фоновое изображение повторяется без промежутков.
Пример свойства background-repeat со значением "round":
Пример свойства CSS background-repeat со значением round
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-image: url("https://ru.w3docs.com/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>Значения
| Value | Description | Play it |
|---|---|---|
| repeat | Фоновое изображение повторяется и по горизонтали, и по вертикали. Это значение по умолчанию. | Play it » |
| repeat-x | Фоновое изображение повторяется только по горизонтали. | Play it » |
| repeat-y | Фоновое изображение повторяется только по вертикали. | Play it » |
| no-repeat | Фоновое изображение не повторяется. | Play it » |
| space | Фоновое изображение повторяется максимально возможное количество раз без обрезки. | Play it » |
| round | Фоновое изображение повторяется без промежутков. | Play it » |
| initial | Устанавливает свойство в значение по умолчанию. | Play it » |
| inherit | Наследует свойство от родительского элемента. |
Practice
Какие разные значения можно указать для свойства 'background-repeat' в CSS?