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: unset;
Свойство background-position-x
принимает одно или несколько значений, разделённых запятыми.
Значения
left
-
Выравнивает левый край фонового изображения по левому краю фонового позиционирующего слоя.
center
-
Выравнивает центр фонового изображения по центру фонового позиционирующего слоя.
right
-
Выравнивает правый край фонового изображения по правому краю фонового позиционирующего слоя.
<length>
-
Смещение левого вертикального края данного фонового изображения от левого вертикального края фонового слоя. (Некоторые браузеры позволяют назначать правый край для смещения).
<percentage>
-
Смещение горизонтальной позиции заданного фонового изображения относительно контейнера. Значение 0% означает, что левый край фонового изображения выровнен с левым краем контейнера, а значение 100% означает, что правый край фонового изображения выровнен с правым краем контейнера, таким образом значение 50% горизонтально центрирует фоновое изображение.
Формальный синтаксис
Спецификации
Specification |
---|
CSS Backgrounds and Borders Module Level 4 # background-position-longhands |
Совместимость с браузерами
BCD tables only load in the browser