CSS свойство background-position устанавливает начальную позицию для каждого фонового изображения. Положение относительно уровня положения, установленного background-origin.

Синтаксис

/* Ключевые значения */
background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;

/* <процент> значения */
background-position: 25% 75%;

/* <отрезок> значения */
background-position: 0 0;
background-position: 1cm 2cm;
background-position: 10ch 8em;

/* Несколько изображений */
background-position: 0 0, center;

/* Значения смещения края */
background-position: bottom 10px right 20px;
background-position: right 3em bottom 10px;
background-position: bottom 10px right;
background-position: top right 10px;

/* Глобальные значения */
background-position: inherit;
background-position: initial;
background-position: unset;

Свойство background-position указывается в виде одного или нескольких значений <position>, разделенных запятыми.

Значения

<position>
<position>. Позиция определяет координату x/y, чтобы разместить элемент относительно границ поля элемента. Она может быть определена с использованием одного и двух значений. Если используются два значения, первое значение предоставляет горизонтальную позицию, а второе представляет вертикальную позицию. Если указано только одно, второе значение считается center.

Синтаксис 1-значения: значение может быть:

  • Значение ключевого слова center, которое центрирует изображение.
  • Одно из значений ключевых слов top, left, bottom, right. Оно указывает край напротив, которого нужно поместить элемент. Затем для другого измерения устанавливается значение 50%, таким образом элемент размещается в середине указанного края.
  • <length> или <percentage>. Оно указывает координату X относительно левого края, с координатой Y установленной на 50%.

Синтаксис с 2-значениями: одно из значений определяет X, а другое определяет Y. Каждое значение может быть:

  • Одно из значений ключевых слов top, left, bottom, right. Если здесь указаны left или right, то оно определяет  X, а другое заданное значение определяет Y. Если даны top или bottom, то оно определяет Y, а другое значение определяет X.
  • <length> или <percentage>. Если другое значение является left или right, то оно определяет Y, относительно верхнего края. Если другое значение top или bottom, то оно определяет X, относительно левого края. Если оба значения <length> или <percentage>, то первое определяет X, а второе Y.

Обратите внимание,что:

  • Если одно значение top или bottom, то другое значение не может быть top или bottom.
  • Если одно значение  является left или right, то другое значение не может быть left или right.

Это означает, например, что top top и left right являются недействительные.

Официальный синтаксис

<bg-position>#

где
<bg-position> = [ [ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ] ]

где
<length-percentage> = <length> | <percentage>

Примеры

Каждый из этих примеров использует свойство background для создания желтого, прямоугольного элемента, содержащего изображение звезды. В каждом примере, звезда находится в другой позиции. Третий пример иллюстрирует, как указать позиции для разных фоновых изображений в одном элементе.

HTML

<div class="exampleone">Example One</div>
<div class="exampletwo">Example Two</div>
<div class="examplethree">Example Three</div>

CSS

/* Общий среди всех <div>-ов */
div {
  background-color: #FFEE99;
  background-repeat: no-repeat;
  width: 300px;
  height: 80px;
  margin-bottom: 12px;
}

/* В этих примерах используется сокращенное свойство 'background' */
.exampleone {
  background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #FFEE99 2.5cm bottom no-repeat;
}
.exampletwo {
  background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #FFEE99 3em 50% no-repeat;
}

/* Несколько фоновых изображений: каждое изображение сопоставляется 
   с соответствующей позицией, от первого указанного до последнего. */
.examplethree {
  background-image:    url("https://mdn.mozillademos.org/files/11987/startransparent.gif"), 
                       url("https://mdn.mozillademos.org/files/7693/catfront.png");
  background-position: 0px 0px,
                       center;
}

Результат

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

Спецификация Статус Комментарий
CSS Backgrounds and Borders Module Level 3
Определение 'background-position' в этой спецификации.
Кандидат в рекомендации Добавлена поддержка нескольких фонов и синтаксиса с четырьмя значениями. Изменяет определение процента, чтобы соответствовать реализациям.
CSS Level 2 (Revision 1)
Определение 'background-position' в этой спецификации.
Рекомендация Позволяет смешивать значения ключевых слов и <length> и <percentage>.
CSS Level 1
Определение 'background-position' в этой спецификации.
Рекомендация Первоначальное определение.

Начальное значение0% 0%
Применяется квсе элементы. Это также применяется к ::first-letter и ::first-line.
Наследуетсянет
Процентыотносятся к размеру области позиционирования фона минус размер фонового изображения; размер - ширина горизонтальных смещений и высота вертикальных
Отображениевизуальный
Обработка значениясписок, каждый элемент которого состоит из двух ключевых слов, представляющих начало координат и два смещения от этого начала, каждое из которых задаётся абсолютной длиной (если дано length), иначе как проценты
Animation typerepeatable list of simple list of length, percentage, or calc
Канонический порядокуникальный неоднозначный порядок, определённый формальной грамматикой

Совместимость браузеров

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidEdge MobileFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
background-positionChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка 4Opera Полная поддержка 3.5Safari Полная поддержка 1WebView Android Полная поддержка ДаChrome Android Полная поддержка ДаEdge Mobile Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
Multiple backgroundsChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 3.6IE Полная поддержка 9Opera Полная поддержка 10.5Safari Полная поддержка 1.3WebView Android Полная поддержка ДаChrome Android Полная поддержка ДаEdge Mobile Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
Four-value syntax (support for offsets from any edge)Chrome Полная поддержка 25Edge Полная поддержка 12Firefox Полная поддержка 13IE Полная поддержка 9Opera Полная поддержка 10.5Safari Полная поддержка 7WebView Android Полная поддержка ДаChrome Android Полная поддержка ДаEdge Mobile Полная поддержка ДаFirefox Android Полная поддержка 14Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да

Легенда

Полная поддержка  
Полная поддержка

Quantum CSS заметки

  • В Gecko есть ошибка, означающая, что background-position не может быть transitioned между двумя значениями, содержащими разные числа значений <position>, для примера background-position: 10px 10px; and background-position: 20px 20px, 30px 30px; (смотрите баг 1390446). Новый параллельный CSS движок Firefox (также известный как Quantum CSS или Stylo, который планируется выпустить в Firefox 57) исправляет это.

Смотрите также

Метки документа и участники

Внесли вклад в эту страницу: mdnwebdocs-bot, Akh-rman
Обновлялась последний раз: mdnwebdocs-bot,