background-position-x

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

Попробуйте

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

Синтаксис

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

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

Значения

left: Выравнивает левый край изображения фона с левым краем слоя позиционирования фона.
center: Выравнивает центр изображения фона с центром слоя позиционирования фона.
right: Выравнивает правый край изображения фона с правым краем слоя позиционирования фона.
<length>: Смещение левого вертикального края заданного изображения фона от левого вертикального края слоя позиционирования фона. (Некоторые браузеры позволяют задать смещение от правого края).
<percentage>: Смещение горизонтального положения заданного изображения фона относительно контейнера. Значение 0% означает, что левый край изображения фона выровнен с левым краем контейнера, а значение 100% означает, что правый край изображения фона выровнен с правым краем контейнера. Таким образом, значение 50% горизонтально центрирует изображение фона.

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

Начальное значение	`0%`
Применимо к	всем элементам. Также применимо к `::first-letter` и `::first-line`.
Наследуется	нет
Проценты	относятся к ширине области позиционирования фона минус ширина изображения фона
Вычисленное значение	Список, каждый элемент которого состоит из: смещения, заданного как сочетание абсолютной длины и процента, плюс ключевое слово происхождения
Тип анимации	повторяющийся список

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

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;
}

Результат

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

Спецификация
CSS Backgrounds and Borders Module Level 4 # background-position-longhands

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`background-position-x`	1	12	49	15	1	18	49	14	1	1.0	4.4
`side-relative_values`	Нет	12–79	49	Нет	15.4	Нет	49	Нет	15.4	Нет	Нет

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/background-position-x