background-position-x

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

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

Значение этого свойства отменяется любой декларацией 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

Выравнивает центр фонового изображения по центру фонового позиционирующего слоя.

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

<length>

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

<percentage>

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

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

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

<length-percentage> =
<length> | (en-US)
<percentage>

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

Specification
CSS Backgrounds and Borders Module Level 4
# background-position-longhands
Начальное значение0%
Применяется квсе элементы. Это также применяется к ::first-letter и ::first-line.
Наследуетсянет
Процентыотносятся к ширине области позиционирования фона минус высота фонового изображения
Обработка значенияСписок, каждый элемент которого состоит из: смещения, данного комбинацией абсолютной длины и процентов плюс ключевое слово
Animation typeповторяющийся список из

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

BCD tables only load in the browser

Смотрите также