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

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

Значение этого свойства переопределяется любым объявлением сокращённого свойства background или background-position, применённым к элементу после него.

Попробуйте

background-position-x: left;

background-position-x: center;

background-position-x: 25%;

background-position-x: 2rem;

background-position-x: right 32px;

<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-x: left;
background-position-x: center;
background-position-x: right;

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

/* <length> values */
background-position-x: 0px;
background-position-x: 1cm;
background-position-x: 8em;

/* Side-relative values */
background-position-x: right 3px;
background-position-x: left 25%;

/* Multiple values */
background-position-x: 0px, center;

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

Значения

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

left

Совмещает левый край фонового изображения с левым краем слоя позиционирования фона.

center

Совмещает центр фонового изображения с центром слоя позиционирования фона.

right

Совмещает правый край фонового изображения с правым краем слоя позиционирования фона.

<length>

Смещение левого вертикального края заданного фонового изображения относительно левого вертикального края слоя позиционирования фона. (Некоторые браузеры позволяют задавать смещение относительно правого края.)

<percentage>

Смещение горизонтального положения заданного фонового изображения относительно контейнера. Значение 0% означает, что левый край фонового изображения совмещён с левым краем контейнера, а значение 100% означает, что правый край фонового изображения совмещён с правым краем контейнера. Таким образом, значение 50% располагает фоновое изображение по центру по горизонтали.

Формальное определение

Формальный синтаксис

background-position-x = 
  [ center | [ [ left | right | x-start | x-end ]? <length-percentage>? ]! ]#

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

Примеры

Базовый пример

В следующем примере показана реализация фонового изображения, в которой свойства background-position-x и background-position-y используются для раздельного задания горизонтального и вертикального положения изображения.

HTML

<div></div>

CSS

div {
  width: 300px;
  height: 300px;
  background-color: skyblue;
  background-image: url("https://mdn.dev/archives/media/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png");
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: bottom;
}

Результат

Значения относительно сторон

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

HTML

<div></div>

CSS

div {
  width: 300px;
  height: 300px;
  background-color: seagreen;
  background-image: url("https://mdn.dev/archives/media/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png");
  background-repeat: no-repeat;
  background-position-x: right 20px;
  background-position-y: bottom 10px;
}

Результат

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

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

См. также

• background-position
• background-position-y
• Использование нескольких фоновых изображений