background-position

Описание

Свойство CSS background-position задает начальное положение фонового изображения относительно элемента.

background-position
Значения: background-position: позиция | inherit
Начальное значение: 0% 0%
Область применения: блочные элементы
Наследование: нет
Поддержка браузерами: основные значения Internet Explorer 8+, Chrome 1+, Opera 3.5+, Safari 1+, Firefox 1+, Android +, iOS +
Поддержка браузерами: многослойные фоны Internet Explorer 9+, Chrome 1+, Opera 10.5+, Safari 1.3+, Firefox 3.6+, Android +, iOS +
Синтаксис JavaScript object.style.backgroundPosition="center"
Примечание:

Свойство background-position поддерживается всеми современными браузерами.
В спецификации CSS3 свойство background-position поддерживает многослойные фоны и позволяет задавать положение для каджого фонового изображения. В этом случае значения перечисляются через запятую.

Синтаксис

background-position:  позиция[, позиция]*

где позиция — одно из поддерживаемых значений.

Значения

background-position позволяет задавать положение фонового рисунка по горизонтали и по вертикали. В качестве значений могут выступать как ключевые слова так и точные значения, указанные в пикселях или процетах. Для указания положения по горизонтали используются следующие ключевые слова: left, center и right. Для положения по вертикали — top, center и bottom.
Свойство background-position может принимать следующие значения:

left top
Начальное положение фонового изображения в верхнем левом углу (0% 0%)
left center
Начальное положение фонового изображения по левому краю и по центру (0% 50%)
left bottom
Начальное положение фонового изображения в левом нижнем углу (0% 100%)
right top
Начальное положение фонового изображения в верхнем правом углу (100% 0%)
right center
Начальное положение фонового изображения по правому краю и по центру (100% 50%)
right bottom
Начальное положение фонового изображения в правом нижнем углу (100% 100%)
center top
Начальное положение фонового изображения по центру вверху (50% 0%)
center center
Начальное положение фонового изображения по центру (50% 50%)
center bottom
Начальное положение фонового изображения по центру внизу (100% 100%)
x% y%
Указыватеся начальное положение фонового изображения в процентах. Первое значение x% — по горизонтали, второе y% — по вертикали.
x y
Указыватеся начальное положение фонового изображения в других единицаю. Первое значение x — по горизонтали, второе y — по вертикали.
inherit
Наследует значение родительского элемента

Если указано только одно ключевое слово, второе будет восприниматься как center (50%).
Можно комбинировать значения, указанные в % и других единицаю.

Значение inherit не поддерживает IE7 и более старые версии браузера.

Пример

<!DOCTYPE HTML>
<head>
	<meta http-equiv="content-type" content="text/html" />
	<style>
.box {
    background-image: url(img.jpg);
	background-position: left top;
    background-repeat: no-repeat;
</style>
	<title>Свойство CSS background-position</title>
</head>
<body>
	<div class="box">
	</div>
</body>
</html>
<!DOCTYPE HTML>
<head>
	<meta http-equiv="content-type" content="text/html" />
	<style>
.box {
    background: url(img.jpg), url(img2.jpg);
	background-position: left top, 100px 30%;
    background-repeat: no-repeat;
</style>
	<title>Свойство CSS background-position</title>
</head>
<body>
	<div class="box">
	</div>
</body>
</html>

Комментирование запрещено.