Свойство CSS `background-position`

Свойство background-position CSS задаёт начальное положение каждого фонового изображения.

Попробуйте

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 class="display-block" id="default-example">
  <div class="transition-all" id="example-element"></div>
</section>

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

Синтаксис

/* 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;

Значения

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

<position>

Значение position. Двумерная координата, состоящая из одного или двух смещений и, при необходимости, одной или двух сторон смещения, используемая для задания положения относительно краёв рамки элемента.

Описание

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

Значение задаётся списком положений изображений, разделённых запятыми; каждое положение изображения определяется с помощью одного–четырёх значений. Если используются два значения, не являющиеся ключевыми словами, первое задаёт горизонтальное положение, а второе — вертикальное. Если указано только одно значение, предполагается, что второе значение равно 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 левее контейнера; в этом примере это означает, что правый край изображения совпадает с правым краем контейнера)
• -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