background-position

/* Keyword values */
background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;

/* <percentage> values */
background-position: 25% 75%;

/* <length> values */
background-position: 0 0;
background-position: 1cm 2cm;
background-position: 10ch 8em;

/* Multiple images */
background-position:
  0 0,
  center;

/* Edge offsets values */
background-position: bottom 10px right 20px;
background-position: right 3em bottom 10px;
background-position: bottom 10px right;
background-position: top right 10px;

/* Global values */
background-position: inherit;
background-position: initial;
background-position: revert;
background-position: revert-layer;
background-position: unset;

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

<position>

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

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

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

Синтаксис с двумя значениями: Одно значение определяет 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 некорректны.
• Порядок: При парном использовании ключевых слов порядок не важен, так как браузер может его переупорядочить; значения top left и left top дадут одинаковый результат. При парном использовании <length> или <percentage> с ключевым словом порядок важен: значение, определяющее X, должно идти первым, а затем Y, поэтому, например, значение right 20px допустимо, а 20px right нет. Значения left 20% и 20% bottom допустимы, так как значения X и Y чётко определены и порядок соблюден.
• Значение по умолчанию - left top или 0% 0%.

Синтаксис с тремя значениями: Два значения - ключевые, а третье - смещение для предыдущего значения:

• Первое значение - одно из ключевых слов top, left, bottom, right, или center. Если указано left или right, то это определяет X. Если указано top или bottom, то это определяет Y, а другое ключевое слово определяет X.
• Значение <length> или <percentage>, если это второе значение, является смещением для первого значения. Если это третье значение, оно является смещением для второго значения.
• Единственное значение длины или процента - смещение для ключевого слова, предшествующего ему. Сочетание одного ключевого слова с двумя значениями <length> или <percentage> некорректно.

Синтаксис с четырьмя значениями: Первое и третье значения - ключевые значения, определяющие X и Y. Второе и четвёртое значения - смещения для предыдущих ключевых слов X и Y:

• Первое и третье значения равны одному из ключевых слов top, left, bottom, или right. Если для первого значения указано left или right, то это определяет X, а другое значение определяет Y. Если для первого значения указано top или bottom, то это определяет Y, а другое ключевое слово определяет X.
• Второе и четвёртое значения - значения <length> или <percentage>. Второе значение - смещение для первого ключевого слова. Четвёртое значение - смещение для второго ключевого слова.

Процентное смещение заданного положения изображения фона относительно контейнера. Значение 0% означает, что левый (или верхний) край изображения фона выровнен с соответствующим левым (или верхним) краем контейнера, или метка 0% изображения будет на метке 0% контейнера. Значение 100% означает, что правый (или нижний) край изображения фона выровнен с правым (или нижним) краем контейнера, или метка 100% изображения будет на метке 100% контейнера. Таким образом, значение 50% по горизонтали или вертикали центрирует изображение фона, так как 50% изображения будет находиться на отметке 50% контейнера. Аналогично, background-position: 25% 75% означает, что точка на изображении, которая находится на расстоянии 25% от левого края и 75% от верхнего края, будет расположена в точке контейнера, которая находится на расстоянии 25% от левого края контейнера и 75% от верхнего края контейнера.

По сути, размер изображения фона вычитается из соответствующего размера контейнера, а затем процент полученного значения используется в качестве прямого смещения от левого (или верхнего) края.

(container width - image width) * (position x%) = (x offset value)
(container height - image height) * (position y%) = (y offset value)

В качестве примера рассмотрим ось X. Допустим, у нас есть изображение шириной 300px, которое используется в контейнере шириной 100px, при этом background-size установлено в auto:

100px - 300px = -200px (container & image difference)

Поэтому при значениях позиций в процентах -25%, 0%, 50%, 100%, 125% мы получаем следующие значения смещения края изображения относительно контейнера:

-200px * -25% = 50px
-200px * 0% = 0px
-200px * 50% = -100px
-200px * 100% = -200px
-200px * 125% = -250px

Таким образом, при этих результирующих значениях для нашего примера смещение левого края изображения от левого края контейнера:

• + 50px (размещение левого края изображения по центру контейнера шириной 100 пикселей)
• 0px (левый край изображения совпадает с левым краем контейнера)
• -100px (левый край изображения смещён влево на 100px от контейнера, в данном случае это означает, что центральная область изображения размером 100px центрируется в контейнере)
• -200px (левый край изображения смещён влево на 200px от контейнера, в данном случае это означает, что правый край изображения шириной 300px совпадает с правым краем контейнера)
• -250px (левый край изображения смещён влево на 250px от контейнера, в данном случае это помещает правый край изображения шириной 300px в центр контейнера)

Стоит отметить, что если ваше значение background-size равно размеру контейнера для заданной оси, то позиция в процентах для этой оси не окажет никакого влияния, потому что «разница между контейнером и изображением» будет равна нулю. Вам нужно будет задать смещение с помощью абсолютных значений.

background-position = 
  <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="example-one">Example One</div>
<div class="example-two">Example Two</div>
<div class="example-three">Example Three</div>

CSS

/* Shared among all <div>s */
div {
  background-color: #ffee99;
  background-repeat: no-repeat;
  width: 300px;
  height: 80px;
  margin-bottom: 12px;
}

/* These examples use the `background` shorthand property */
.example-one {
  background: url("star-transparent.gif") #ffee99 2.5cm bottom no-repeat;
}
.example-two {
  background: url("star-transparent.gif") #ffee99 left 4em bottom 1em no-repeat;
}

/* Multiple background images: Each image is matched with the
   corresponding position, from first specified to last. */
.example-three {
  background-image: url("star-transparent.gif"), url("cat-front.png");
  background-position:
    0px 0px,
    right 3em bottom 2em;
}

Результат

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