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

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

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

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

Синтаксис

background-position: <x>[, <y>]*, где

<x> = <размер> | <проценты> | left | center | right,

<y> = <размер> | <проценты> | top | center | bottom.

Значения

x y – первое значение указывает позицию фонового изображения по горизонтали, а второе (через пробел) – по вертикали. В качестве координат могут приниматься любые доступные в CSS единицы измерения, а также проценты, в любом сочетании. При этом считается, что верхний левый угол задается координатами 0 0, например, 0px 0em. Если указано только одно значение, то второе принимается за 50%. Если координаты заданы в процентах, то нижний правый угол задается координатами 100% 100%.
Ключевые слова – вместо координат разрешается использовать ключевые слова left (x=0%), center (x=50%), right (x=100%) вместо координаты x и top (y=0%), center (y=50%), bottom (y=100%) вместо координаты y. Например, center top соответствует паре координат в процентах 50% 0% и т.д.

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

Ссылки

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

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

Примеры

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-repeat: no-repeat;
		background-image: url("images/cabinet.png");
		}
		
		.background_1{background-position: 30px 60%;}
		.background_2{background-position: 80% 2em}
		.background_3{background-position: center bottom;}
	</style>
	
</head>
<body>
	<p class="background_1">background-position: 30px 60%</p>
	<p class="background_2">background-position: 80% 2em</p>
	<p class="background_3">background-position: center bottom</p>
</body>
</html>

Пример №1