CSS-свойство background-position

CSS-свойство background-position устанавливает начальную позицию элемента background-image (то есть источника изображения). Часто удобнее использовать комплексное свойство фона background.

Значение по умолчанию:	`0% 0%`
Применяется к:	Все элементы
Наследование:	Нет
Анимирование:	Да. Анимируемые свойства
Версия:	CSS 1, 2, 3

Синтаксис

Синтаксически свойства задаются по следующему шаблону:

background-position: [ percentage | length | left | center | right ] 1 or 2 values | initial | inherit

Примеры написания кода свойства background-position:

p {
    background-image: url("images/smiley.png");
    background-position: 50% center;
}

Если указано только одно значение, второе значение устанавливается как center. Если используются два значения, и хотя бы одно не является ключевым словом, первое значение представляет горизонтальное позиционирование, а второе представляет вертикальное позиционирование.

Значения свойств

В следующей таблице описаны значения этого свойства.

Значение	Описание
`bottom`	Эквивалент `100%` для вертикального выравнивания.
`center`	Эквивалентно `50%` для горизонтального выравнивания, если не указано иное, или `50%` для вертикального выравнивания, если оно указано.
`left`	Эквивалентно `0%` для горизонтального выравнивания.
`right`	Эквивалентно `100%` для горизонтального выравнивания.
`top`	Эквивалентно `0%` для вертикального выравнивания.
length	Фактическая длина в пикселях. Например, с парой `10px 20px` верхний левый угол изображения помещается на `10px` вправо и на `20px` ниже верхнего левого угла поля элемента.
percentage	Процент от размера элемента. Например, с парой значений `0% 0%` верхний левый угол изображения выравнивается по верхнему левому углу поля элемента.
`initial`	Устанавливает это свойство в значение по умолчанию.
`inherit`	Если указан, связанный элемент принимает вычисленное значение его свойства родительского элемента `background-position`.