background-position
===================

CSS свойство **`background-position`** устанавливает начальную позицию для каждого фонового изображения. Положение относительно уровня положения, установленного `background-origin`.

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

Синтаксис
---------


```css
/\* Ключевые слова \*/
background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;

/\* <процент> значения \*/
background-position: 25% 75%;

/\* <отрезок> значения \*/
background-position: 0 0;
background-position: 1cm 2cm;
background-position: 10ch 8em;

/\* Несколько изображений \*/
background-position:
  0 0,
  center;

/\* Значения смещения края \*/
background-position: bottom 10px right 20px;
background-position: right 3em bottom 10px;
background-position: bottom 10px right;
background-position: top right 10px;

/\* Глобальные значения \*/
background-position: inherit;
background-position: initial;
background-position: unset;
```


Свойство `background-position` указывается в виде одного или нескольких значений `<position>`, разделённых запятыми.

### Значения

`<position>`

`<position>` (en-US). Позиция определяет координату x/y, чтобы разместить элемент относительно границ поля элемента. Она может быть определена с использованием одного и двух значений. Если используются два значения, первое значение предоставляет горизонтальную позицию, а второе представляет вертикальную позицию. Если указано только одно, второе значение считается `center`.**Синтаксис 1-значения:** значение может быть:

* Значение ключевого слова `center`, которое центрирует изображение.
* Одно из значений ключевых слов `top`, `left`, `bottom`, `right`. Оно указывает край, на который следует поместить элемент. Затем для другого измерения устанавливается значение 50%, таким образом элемент размещается в середине указанного края.
* `<length>` или `<percentage>`. Оно указывает координату X относительно левого края, с координатой Y установленной на 50%. **Синтаксис с 2-значениями:** одно из значений определяет X, а другое определяет Y. Каждое значение может быть:
    + Одно из значений ключевых слов `top`, `left`, `bottom`, `right`. Если здесь указаны `left` или `right`, то оно определяет X, а другое заданное значение определяет Y. Если даны `top` или `bottom`, то оно определяет Y, а другое значение определяет X.
* `<length>` или `<percentage>`. Если другое значение является `left` или `right`, то оно определяет Y, относительно верхнего края. Если другое значение `top` или `bottom`, то оно определяет X, относительно левого края. Если оба значения `<length>` или `<percentage>`, то первое определяет X, а второе Y.Обратите внимание,что:
    + Если одно значение `top` или `bottom`, то другое значение не может быть `top` или `bottom`.
* Если одно значение является `left` или `right`, то другое значение не может быть `left` или `right`.Это означает, например, что `top top` и `left right` являются недействительные.

### Официальный синтаксис
```

background-position =   
  <bg-position># (en-US)    
  
<bg-position> =   
  [ (en-US) left | (en-US) center | (en-US) right | (en-US) top | (en-US) bottom | (en-US) <length-percentage> ] (en-US)  | (en-US)  
  [ (en-US) left | (en-US) center | (en-US) right | (en-US) <length-percentage> ] (en-US) [ (en-US) top | (en-US) center | (en-US) bottom | (en-US) <length-percentage> ] (en-US)  | (en-US)  
  [ (en-US) center | (en-US) [ (en-US) left | (en-US) right ] (en-US) <length-percentage>? (en-US) ] (en-US) && (en-US) [ (en-US) center | (en-US) [ (en-US) top | (en-US) bottom ] (en-US) <length-percentage>? (en-US) ] (en-US)    
  
<length-percentage> =   
  <length>      | (en-US)  
  <percentage>    
  
```

Примеры
-------

Каждый из этих примеров использует свойство `background` для создания жёлтого, прямоугольного элемента, содержащего изображение звезды. В каждом примере, звезда находится в другой позиции. Третий пример иллюстрирует, как указать позиции для разных фоновых изображений в одном элементе.

### HTML


```html
<div class="exampleone">Example One</div>
<div class="exampletwo">Example Two</div>
<div class="examplethree">Example Three</div>
```

### CSS


```css
/\* Общий среди всех <div>-ов \*/
div {
  background-color: #ffee99;
  background-repeat: no-repeat;
  width: 300px;
  height: 80px;
  margin-bottom: 12px;
}

/\* В этих примерах используется сокращённое свойство 'background' \*/
.exampleone {
  background: url("startransparent.gif") #ffee99 2.5cm bottom no-repeat;
}
.exampletwo {
  background: url("startransparent.gif") #ffee99 3em 50% no-repeat;
}

/\* Несколько фоновых изображений: каждое изображение сопоставляется
 с соответствующей позицией, от первого указанного до последнего. \*/
.examplethree {
  background-image: url("startransparent.gif"), url("catfront.png");
  background-position:
    0px 0px,
    center;
}
```

### Результат

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

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # background-position |

|  |  |
| --- | --- |
| Начальное значение | `0% 0%` |
| Применяется к | все элементы. Это также применяется к `::first-letter` и `::first-line`. |
| Наследуется | нет |
| Проценты | относятся к размеру области позиционирования фона минус размер фонового изображения; размер - ширина горизонтальных смещений и высота вертикальных |
| Обработка значения | как и у каждого из подсвойств этого свойства:* `background-position-x`: Список, каждый элемент которого состоит из: смещения, данного комбинацией абсолютной длины и процентов плюс ключевое слово
* `background-position-y` (en-US): Список, каждый элемент которого состоит из: смещения, данного комбинацией абсолютной длины и процентов плюс ключевое слово
 |
| Animation type | повторяющийся список из  |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### Quantum CSS заметки

* В Gecko есть ошибка, означающая, что `background-position` не может быть `transitioned` между двумя значениями, содержащими разные числа значений `<position>` (en-US), для примера `background-position: 10px 10px;` and `background-position: 20px 20px, 30px 30px;` (смотрите Firefox bug 1390446). Новый параллельный CSS движок Firefox (также известный как Quantum CSS или Stylo, который планируется выпустить в Firefox 57) исправляет это.
Смотрите также
--------------

* `background-position-x`
* `background-position-y` (en-US)
* `background-position-inline`
* `background-position-block`
* Использование нескольких значений
* `transform-origin` (en-US)