Background-position

Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Частично Частично Да Да Да Да Да Да Да Да Да Да Да Да

 

CSS CSS1, CSS2.1
Значение по умолчанию 0% 0%
Наследуется Нет
Применяется К блочным элементам
Аналог HTML Нет

Описание

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

Синтаксис

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

Значения

У свойства background-position два значения, положение по горизонтали (может быть — 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% (в правом нижнем углу)

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

При inherit значение наследуется у родителя элемента.

Пример

<!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

Браузеры

Internet Explorer до седьмой версии включительно не поддерживает значение inherit.