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.

Поддержка браузеров

Свойство background-position поддерживается во всех основных браузерах.

Читайте также

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.