html.okpython.net
HTML и CSS для начинающих

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.

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

Ссылки

Примеры

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