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

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

CSS свойство background-position задает положение (позицию) фонового изображения. По умолчанию, фоновое изображение размещается в верхнем левом углу элемента и повторяется по вертикали и горизонтали.

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

Свойство	Chrome	Firefox	Opera	Safari	IExplorer	Edge
background-position	1.0	1.0	3.5	1.0	4.0	12.0

CSS синтаксис:

background-position:"значение";

JavaScript синтаксис:

object.style.backgroundPosition="center"

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

Значение	Описание
left top left center left bottom right top right center right bottom center top center center center bottom	Задает положение изображения. Первое значение-горизонтальное положение, а второе значение вертикальное. Если вы указываете только одно ключевое слово, другое значение будет "center"
x% y%	Задает положение изображения. Первое значение-горизонтальное положение, а второе значение вертикальное. Левый верхний угол имеет 0% 0% (это значение по умолчанию). В правом нижнем углу 100% 100%. Если указано только одно значение, то другое значение будет 50%.
x y	Задает положение изображения. Первое значение-горизонтальное положение, а второе значение вертикальное. Левый верхний угол имеет 0 0. Значения могут быть в пикселях, или других единицах измерения CSS. Если указано только одно значение, то другое значение будет 50%. Вы можете совместно использовать проценты и единицы измерения.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Указывает, что значение наследуется от родительского элемента.

Версия CSS

CSS1

Наследуется

Нет.

Анимируемое

Да.

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

<!DOCTYPE html>
<html>
<head>
<title> Свойство background-position </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>

CSS свойства