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

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

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

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

Синтаксис

background-position-y: [<y> | <проценты> | top | center | bottom]#

Значения

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

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

Ссылки

Официальный сайт W3C: https://drafts.csswg.org/css-backgrounds-4/#propdef-background-position-y

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/background-position-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-repeat: no-repeat;
		background-image: url("images/cabinet.png");
		}
		
		/* Задаем х и у */
		.background_1{
		background-position-x: 30px;
		background-position-y: 60%;
		}
		
		.background_2{
		background-position-x: 80%;
		background-position-y: 2em;
		}
		
		.background_3{
		background-position-x: center;
		background-position-y: bottom;
		}
	</style>
	
</head>
<body>
	<p class="background_1">
		background-position-x: 30px<br>
		background-position-y: 60%
	</p>
	
	<p class="background_2">
		background-position-x: 80%<br>
		background-position-y: 2em
	</p>
	
	<p class="background_3">
		background-position-x: center<br>
		background-position-y: bottom
	</p>
</body>
</html>

Пример №1