background-position-x

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨сентябрь 2016 г.⁩.

* Some parts of this feature may have varying levels of support.

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

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

background-position-x: left;

background-position-x: center;

background-position-x: 25%;

background-position-x: 2rem;

background-position-x: right 32px;

<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 или коротким свойствомbackground-position применёнными после его объявления.

Синтаксис

css

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

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

Значения

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

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

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

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

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

Specification
CSS Backgrounds Module Level 4 # background-position-longhands

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