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

CSS свойства

Определение и применение

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

Поддержка браузерами

СвойствоChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
background-repeat 1.01.03.51.04.012.0

CSS синтаксис:

 background-repeat: "repeat | repeat-x | repeat-y | no-repeat | initial | inherit";

JavaScript синтаксис:

object.style.backgroundRepeat="repeat-y"

Значения свойства

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

Версия CSS

CSS1

Наследуется

Нет.

Анимируемое

Нет.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title> Свойство background-repeat</title>
<style> 
.primer {
background-image:url("smile.png"); /* задаём изображение для заднего фона */
background-position:center; /* задаём положение изображения */
background-repeat:repeat-y; /* повторяем изображение вертикально */
background-color:khaki; /* задаём цвет заднего фона */
height:300px; 
width:300px;
}
</style>
</head>
	<body>
		<div class = "primer"></div>
	</body>
</html>
Пример использования свойства background-repeat.
Пример использования свойства background-repeat.
CSS свойства