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

Интерактивный пример

background-position: top;

background-position: left;

background-position: center;

background-position: 25% 75%;

background-position: bottom 50px right 100px;

background-position: right 35% bottom 45%;

<section>  <div></div></section>

#example-element {  background-color: navajowhite;  background-image: url("/shared-assets/images/examples/star.png");  background-repeat: no-repeat;  height: 100%;}

Синтаксис

/* Ключевые слова */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 являются недействительные.

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

background-position =
<bg-position>#

<bg-position> =
<position>|
<position-three>

<position> =
<position-one>|
<position-two>|
<position-four>

<position-three> =
[left|center|right]&&[[top|bottom]<length-percentage>]|
[[left|right]<length-percentage>]&&[top|center|bottom]

<position-one> =
left|
center|
right|
top|
bottom|
x-start|
x-end|
y-start|
y-end|
block-start|
block-end|
inline-start|
inline-end|
<length-percentage>

<position-two> =
[left|center|right|x-start|x-end]&&[top|center|bottom|y-start|y-end]|
[left|center|right|x-start|x-end|<length-percentage>][top|center|bottom|y-start|y-end|<length-percentage>]|
[block-start|center|block-end]&&[inline-start|center|inline-end]|
[start|center|end]{2}

<position-four> =
[[left|right|x-start|x-end]<length-percentage>]&&[[top|bottom|y-start|y-end]<length-percentage>]|
[[block-start|block-end]<length-percentage>]&&[[inline-start|inline-end]<length-percentage>]|
[[start|end]<length-percentage>]{2}

<length-percentage> =
<length>|
<percentage>

Примеры

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

HTML

<div>Example One</div><div>Example Two</div><div>Example Three</div>

CSS

/* Общий среди всех <div>-ов */div {  background-color: #ffee99;  background-repeat: no-repeat;  width: 300px;  height: 80px;  margin-bottom: 12px;}/* В этих примерах используется сокращённое свойство 'background' */.exampleone {  background: url("star-transparent.gif") #ffee99 2.5cm bottom no-repeat;}.exampletwo {  background: url("star-transparent.gif") #ffee99 left 4em bottom 1em no-repeat;}/* Несколько фоновых изображений: каждое изображение сопоставляется   с соответствующей позицией, от первого указанного до последнего. */.examplethree {  background-image: url("star-transparent.gif"), url("cat-front.png");  background-position:    0px 0px,    right 3em bottom 2em;}

Результат

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

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

Quantum CSS заметки

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

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

• background-position-x
• background-position-y
• background-position-inline
• background-position-block
• Использование нескольких значений
• transform-origin