background-position

Браузер Internet Explorer Netscape Opera Safari Mozilla Firefox
Версия 5.5 6.0 7.0 6.0 7.0 8.0 7.0 8.0 9.0 1.0 1.7 1.0 2.0
Поддерживается Да Да Да Да Да Да Да Да Да Да Да Да Да

Краткая информация

CSS CSS1
Значение по умолчанию 0% 0%
Наследуется Нет
Применяется К блочным и заменяемым элементам
Аналог HTML Нет
Ссылка на спецификацию http://www.w3.org/TR/CSS21/colors.html#propdef-background-position

Описание

Задает начальное положение фонового изображения, установленного с помощью параметра background-image.

Синтаксис

background-position: [проценты | значение] | [left | center | right] || [top | center | bottom]

Аргументы

У этого параметра два значения, положение по горизонтали (может быть — left, center, right) и вертикали (может быть — top, center, bottom). Кроме использования ключевых слов положение также можно задавать в процентах, пикселах или других единицах. Если применяются ключевые слова, то порядок их следования не имеет значения, при процентной записи вначале задается положение рисунка по горизонтали, а затем, через пробел, положение по вертикали. Отношение между используемыми ключевыми словами и процентной записью следующее.

top left = left top = 0% 0% (в левом верхнем углу)
top = top center = center top = 50% 0% (по центру вверху)
right top = top right = 100% 0% (в правом верхнем углу)
left = left center = center left = 0% 50% (по левому краю и по центру)
center = center center = 50% 50% (по центру)
right = right center = center right = 100% 50% (по правому краю и по центру)
bottom left = left bottom = 0% 100% (в левом нижнем углу)
bottom = bottom center = center bottom = 50% 100% (по центру внизу)
bottom right = right bottom = 100% 100% (в правом нижнем углу)

В скобках указано, где располагается фоновый рисунок относительно контейнера.

Пример

Валидный CSS
Валидный HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>background-position</title>
<style type="text/css">
BODY {
 background-image: url('mybg.gif'); /* Путь к фоновому рисунку */
 background-position: right bottom; /* Положение фона */
 background-repeat: no-repeat; /* Отменяем повторение фона */
}
</style>
</head>
<body>
<p>...</p>
</body>
</html>

Объектная модель

[window.]document.getElementById("elementID").style.backgroundPosition