background-position

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

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

Значение по умолчанию 0% 0%
Наследуется Нет
Применяется Ко всем элементам
Анимируется Да

Синтаксис

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

Здесь:

<позиция> = [left | center | right | <проценты> | <размер>] || [top | center | bottom | <проценты> | <размер>].

Описание Пример
<тип> Указывает тип значения. <размер>
A && B Значения должны выводиться в указанном порядке. <размер> && <цвет>
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [,<время>]*
+ Повторять один или больше раз. <число>+
? Указанный тип, слово или группа не является обязательным. inset?
{A, B} Повторять не менее A, но не более B раз. <радиус>{1,4}
# Повторять один или больше раз через запятую. <время>#

Значения

У свойства 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% (в правом нижнем углу)

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

Песочница

div {
  background-image: url(image/pic.png);
  background-repeat: no-repeat;
  background-position: {{ playgroundValue }};
}

Пример

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>background-position</title> <style> html { height: 100%; /* Высота страницы */ } body { background-image: url(/example/image/mybg.png); /* Путь к фоновому рисунку */ background-position: right bottom; /* Положение фона */ background-repeat: no-repeat; /* Отменяем повторение фона */ } </style> </head> <body> <p>...</p> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>background-position</title> <style> body { background-image: url(/example/image/pattern-left.png), url(/example/image/pattern-right.png); background-repeat: repeat-y, repeat-y; background-position: left, right; } </style> </head> <body> <div style="height:2000px"> </div> </body> </html>

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

Объект.style.backgroundPosition

Спецификация

Спецификация Статус
CSS Backgrounds and Borders Module Level 3 Возможная рекомендация
CSS Level 2 (Revision 1) Рекомендация
CSS Level 1 Рекомендация

Браузеры

 
один фон 4 12 1 3.5 1 1
несколько фонов 9 12 1 10.5 1.3 3.6
 
один фон 2.1 1 10 3.2
несколько фонов 2.1 1 10 3.2

В таблице браузеров применяются следующие обозначения.

  • — элемент полностью поддерживается браузером;
  • — элемент браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.
Цвет и фон

Практика