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

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% и т.д.

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

Ссылки

Примеры

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