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% горизонтально центрирует фоновое изображение.

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

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

где
<length-percentage> = <length> | <percentage>

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

Спецификация Статус Комментарий
CSS Backgrounds and Borders Module Level 4
Определение 'background-position-x' в этой спецификации.
Редакторский черновик Initial specification of longhand sub-properties of background-position to match longstanding implementations.
Начальное значениеleft
Применяется квсе элементы
Наследуетсянет
Процентыотносятся к ширине области позиционирования фона минус высота фонового изображения
Отображениевизуальный
Обработка значенияСписок, каждый элемент которого состоит из: смещения, данного комбинацией абсолютной длины и процентов плюс ключевое слово
Animation typediscrete
Канонический порядокуникальный неоднозначный порядок, определённый формальной грамматикой

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
background-position-xChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 49IE Полная поддержка 6Opera Полная поддержка 15Safari Полная поддержка 1WebView Android Полная поддержка ≤37Chrome Android Полная поддержка 18Firefox Android Полная поддержка 49Opera Android Полная поддержка 18Safari iOS Полная поддержка 1Samsung Internet Android Полная поддержка 1.0
Two-value syntax (support for offsets from any edge)Chrome Нет поддержки НетEdge Полная поддержка 12Firefox Полная поддержка 49IE Полная поддержка 9Opera Нет поддержки НетSafari Нет поддержки НетWebView Android Нет поддержки НетChrome Android Нет поддержки НетFirefox Android Полная поддержка 49Opera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Нет поддержки Нет

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки

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