CSS :: Свойство background-repeat

css-свойство background-repeat (от англ. background repeat – повторение фона) определяет, как будет повторяться фоновое изображение по вертикали и горизонтали до заполнения выделенной под фон области элемента.

Характеристики

Значение по умолчанию: repeat.
Применяется: ко всем элементам.
Наследуется: нет.
Анимируется: нет.
JavaScript: object.style.backgroundRepeat="value".

Синтаксис

background-repeat: <повторение>[ , <повторение> ]*, где

<повторение> = repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}.

Значения

repeat – используется браузером по умолчанию, повторяя изображение по вертикали и горизонтали.
repeat-x – изображение повторяется только по горизонтали.
repeat-y – изображение повторяется только по вертикали.
no-repeat – изображение не повторяется.
space – изображение повторяется таким образом, чтобы полностью заполнить область; если же это не удаётся, между картинками добавляется пустое пространство.
round – изображение повторяется таким образом, чтобы в области поместилось целое число рисунков; если же это не удаётся, фоновые рисунки масштабируются.

Допустимо указывать через пробел сразу два значения: первое ключевое слово задаёт повторение по горизонтали, второе – по вертикали. При этом ключевыми словами не должны быть repeat-x или же repeat-y.

Разрешается указывать через запятую несколько параметров в случае использования более одного фонового изображения.

Ссылки

Официальный сайт W3C: https://www.w3.org/TR/css-backgrounds-3/#the-background-repeat

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/background-repeat

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>
	
	<style>
		p{
		padding: 3em;
		width: 300px;
		min-height: 40px;
		border: dashed green 12px;
		background-color: yellow;
		background-image: url("images/cabinet.png");
		}
		
		/* Задаем х и у */
		.background_1{
		background-repeat: repeat-x;
		}
		
		.background_2{
		background-repeat: no-repeat space;
		}
		
		.background_3{
		background-repeat: round no-repeat;
		}
	</style>
	
</head>
<body>
	<p class="background_1">
		background-repeat: repeat-x
	</p>
	
	<p class="background_2">
		background-repeat: no-repeat space
	</p>
	
	<p class="background_3">
		background-repeat: round no-repeat
	</p>
</body>
</html>

Пример №1