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`

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

`right`

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

`<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 with JavaScript enabled. Enable JavaScript to view data.

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

* `background-position`
* `background-position-y` (en-US)
* `background-position-inline`
* `background-position-block`
* Использование множественных фонов (en-US)