Свойство background-repeat
Синтаксис
background-repeat: repeat | repeat-x | repeat-y | no-repeat | inherit;
Описание
Свойство background-repeat (от англ. "background repeat" ‒ «повторение фона») определяет принцип повторения фонового изображения элемента, т.е. будет ли фоновое изображение повторяться и каким образом.
| Применяется: | ко всем элементам; |
|---|---|
| Наследование: | отсутствует; |
| Проценты: | Н/Д; |
| Медиа: | визуальные. |
Условия использования
Начиная с CSS3 (через запятую) можно указать принцип повторения для каждого фонового изображения элемента.
JavaScript
[объект]
Поддержка браузерами
Спецификация
Значения
- no-repeat
-
Изображение не повторяется в определённом направлении («x» или «y»; отображается только одна копия изображения).
В качестве единственного ключевого слова: вычисляется как
no-repeat no-repeat(x: «no-repeat»; y: «no-repeat»;).
background-repeat: no-repeat; - repeat
-
Изображение повторяется в одном направлении («x» или «y») такое количество раз, чтобы можно было покрыть всю область позиционирования фона.
В качестве единственного ключевого слова: вычисляется как
repeat repeat(x: «repeat»; y: «repeat»;).
background-repeat: repeat; - repeat-x
-
Изображение повторяется только по горизонтали. (Указывается только в качестве единственного ключевого слова!)
В качестве единственного ключевого слова: вычисляется как
repeat no-repeat(x: «repeat»; y: «no-repeat»;).
background-repeat: repeat-x; - repeat-y
-
Изображение повторяется только по вертикали. (Указывается только в качестве единственного ключевого слова!)
В качестве единственного ключевого слова: вычисляется как
no-repeat repeat(x: «no-repeat»; y: «repeat»;).
background-repeat: repeat-y; - round
- Изображение повторяется целое количество раз (т.е., чтобы крайнее изображение не было обрезано) и при этом все копии изображений равномерно масштабируются в определённом направлении («x» или «y») так, чтобы в этом направлении не оставалось пустого/прозрачного пространства.
В качестве единственного ключевого слова: вычисляется как
round round(x: «round»; y: «round»;).
background-repeat: round; - space
- Изображение повторяется целое количество раз (т.е., чтобы крайнее изображение не было обрезано) и при этом копии этого изображения распределяются (по ширине области позиционирования фона) так, чтобы первое и последнее изображение касалось краёв области позиционирования (в результате чего между копиями изображений могут возникать равные пустые/прозрачные пространства). Если в область позиционирования фона в одном направлении вмещается только одна копия изображения, то в этом направлении выводится только одна копия изображения.
В качестве единственного ключевого слова: вычисляется как
space space(x: «space»; y: «space»;).
background-repeat: space; - inherit
- Указывает, что элемент должен унаследовать параметры родительского элемента.
Начальное значение: «repeat».
Пример использования
<html>
<head>
<meta charset="utf-8">
<title>Свойство background-repeat</title>
<style type="text/css">
body { /* синтаксис CSS3 */
background-image: url("/examples/images/fig-red.png"), url("/examples/images/fig-green.png"), url("/examples/images/fig-blue.png");
background-repeat: no-repeat, space repeat, repeat repeat;
}
</style>
</head>
<body>
<h1>Повторение фонового изображения</h1>
<p>Документ с повторяющимися фоновыми изображениями.</p>
</body>
</html>