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 July 2015.
Свойство 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: unset;
Свойство background-position-x принимает одно или несколько значений, разделённых запятыми.
Значения
left-
Выравнивает левый край фонового изображения по левому краю фонового позиционирующего слоя.
center-
Выравнивает центр фонового изображения по центру фонового позиционирующего слоя.
right-
Выравнивает правый край фонового изображения по правому краю фонового позиционирующего слоя.
<length>-
Смещение левого вертикального края данного фонового изображения от левого вертикального края фонового слоя. (Некоторые браузеры позволяют назначать правый край для смещения).
<percentage>-
Смещение горизонтальной позиции заданного фонового изображения относительно контейнера. Значение 0% означает, что левый край фонового изображения выровнен с левым краем контейнера, а значение 100% означает, что правый край фонового изображения выровнен с правым краем контейнера, таким образом значение 50% горизонтально центрирует фоновое изображение.
Формальный синтаксис
Спецификации
| 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