Свойство background-repeat определяет, как будет повторяться фоновое изображение. При значении по умолчанию background-repeat повторяется по горизонтали и по вертикали. Если установлено значение "repeat-x", изображение будет повторяться только по горизонтали. Если установлено значение "repeat-y", изображение будет повторяться только по вертикали. Есть еще две значения: "space" и "round". При значении "Space" изображение будет повторяться без обрезки, а при значении "round" изображение будет повторяться, не оставляя пустые пространства.
Свойство background-repeat нужно использовать вместе со свойствами background-image и background-position.
| Значение по умолчанию | repeat |
| Применяется | Ко всем элементам, а также к ::first-letter и ::first-line. |
| Наследуется | Нет |
| Анимируемое | Нет |
| Версия | CSS1 |
| DOM Syntax | object.style.backgroundRepeat = "repeat-x"; |
Синтаксис
background-repeat: repeat | repeat-x | repeat-y | no-repeat | space | round | initial | inherit;Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
body {
background-image: url("/uploads/media/default/0001/02/668fdd72934232cdeff7a45a89be805113c916b5.jpeg");
background-repeat: repeat;
}
</style>
</head>
<body>
<h2>Например, какой-либо заголовок.</h2>
<p>Например, какой-либо параграф.</p>
</body>
</html>В следующем примере background-image не повторяется:
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
body {
background-image: url("/uploads/media/default/0001/02/668fdd72934232cdeff7a45a89be805113c916b5.jpeg");
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h2>Например, какой-либо заголовок.</h2>
<p>Например, какой-либо параграф.</p>
</body>
</html>Пример, где применено значение "repeat-x". При этом значении background-image повторяется только по горизонтали:
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
body {
background-image: url("/uploads/media/default/0001/02/668fdd72934232cdeff7a45a89be805113c916b5.jpeg");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<h2>Например, какой-либо заголовок.</h2>
<p>Например, какой-либо параграф.</p>
</body>
</html>Рассмотрим пример со значением "repeat-y". В этом случае изображение повторяется только по вертикали:
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
body {
background-image: url("/uploads/media/default/0001/02/668fdd72934232cdeff7a45a89be805113c916b5.jpeg");
background-repeat: repeat-y;
}
</style>
</head>
<body>
<h2>Например, какой-либо заголовок.</h2>
<p>Например, какой-либо параграф.</p>
</body>
</html>Пример, где применено значение "space". Изображение будет повторяться без обрезки:
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
body {
background-image: url("/uploads/media/default/0001/02/668fdd72934232cdeff7a45a89be805113c916b5.jpeg");
background-repeat: space;
}
</style>
</head>
<body>
<h2>Например, какой-либо заголовок.</h2>
<p>Например, какой-либо параграф.</p>
</body>
</html>Пример со значением "round". Изображение повторяется, не оставляя пустые пространства:
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
body {
background-image: url("/uploads/media/default/0001/02/668fdd72934232cdeff7a45a89be805113c916b5.jpeg");
background-repeat: round;
}
</style>
</head>
<body>
<h2>Например, какой-либо заголовок.</h2>
<p>Например, какой-либо параграф.</p>
</body>
</html>Значения
| Значение | Описание |
|---|---|
| repeat | Фоновое изображение повторяется по горизонтали и по вертикали. Значение по умолчанию. |
| repeat-x | Фоновое изображение повторяется только по горизонтали. |
| repeat-y | Фоновое изображение повторяется только по вертикали. |
| no-repeat | Фоновое изображение не повторяется. |
| space | Фоновое изображение повторяется без обрезки. |
| round | Фоновое изображение повторяется, не оставляя пустые пространства. |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Значение элемента наследуется от родительского элемента. |
Поддержка браузера
|
|
|
|
|---|---|---|---|
| 1.0+ | 1.0+ | 1.0+ | 3.5+ |
Практикуйте свои знания
