background-repeat

Пример

Повторите фоновое изображение только по вертикали:

body {
background-image: url("paper.gif");
background-repeat: repeat-y;
}

Определение background-repeat

CSS свойство background-repeat определяет, будет ли повторяться фоновое изображение.

По умолчанию фоновое изображение повторяется как по вертикали, так и по горизонтали.

Совет: Фоновое изображение размещается в соответствии со свойством background-position. Если положение фона не указано, изображение всегда размещается в верхнем левом углу элемента.

Показ демо ❯

Значение по умолчанию:	repeat
Унаследовано:	no
Анимируемый:	no. Читайте о animatable
Версия:	CSS1
JavaScript синтаксис:	object.style.backgroundRepeat="repeat-x" Попробуй

Поддержка background-repeat

Цифры в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.

Свойство
background-repeat	1.0	4.0	1.0	1.0	3.5

Синтаксис background-repeat

Значения background-repeat

Значение	Описание	Демонстрация
repeat	Фоновое изображение повторяется как по вертикали, так и по горизонтали. Последнее изображение будет обрезано, если оно не подходит. Это значение по умолчанию	Демо ❯
repeat-x	Фоновое изображение повторяется только по горизонтали	Демо ❯
repeat-y	Фоновое изображение повторяется только по вертикали	Демо ❯
no-repeat	Фоновое изображение не повторяется. Изображение будет показано только один раз	Демо ❯
space	Фоновое изображение повторяется настолько часто, насколько это возможно, без обрезки. Первое и последнее изображение прикрепляются с обеих сторон элемента, а пробелы равномерно распределяются между изображениями	Демо ❯
round	Фоновое изображение повторяется и сжимается или растягивается, чтобы заполнить пространство (без пробелов)	Демо ❯
initial	Устанавливает для этого свойства значение по умолчанию. Читайте о initial
inherit	Наследует это свойство от своего родительского элемента. Читайте о inherit

Примеры background-repeat

Пример

Повторите фоновое изображение как по вертикали, так и по горизонтали (это значение по умолчанию):

body {
background-image: url("paper.gif");
background-repeat: repeat;
}

Попробуйте сами »

Пример

Повторите фоновое изображение только по горизонтали:

body {
background-image: url("paper.gif");
background-repeat: repeat-x;
}

Попробуйте сами »

Пример

Не повторяйте фоновое изображение. Изображение будет показано только один раз:

body {
background-image: url("paper.gif");
background-repeat: no-repeat;
}

Попробуйте сами »

Пример

Использование background-repeat: space и background-repeat: round:

#example2 {
border: 2px solid black;
padding: 25px;
  background: url("sw3css.gif");
background-repeat: space;
}

#example3 {
  border: 1px solid black;
padding: 25px;
background: url("sw3css.gif");
  background-repeat: round;
}

Попробуйте сами »

Пример

Используйте различные свойства фона для создания изображения "hero":

.hero-image {
background-image: url("photographer.jpg"); /* Используемое изображение */
background-color: #cccccc; /* Используется, если изображение недоступно */
height: 500px; /* Вы должны установить указанную высоту */
background-position: center; /* Центрируйте изображение */
background-repeat: no-repeat; /* Не повторяйте изображение */
background-size: cover; /* Измените размер фонового изображения, чтобы оно покрывало весь контейнер */
}

Попробуйте сами »