background-position-y

Обновлено: 31.05.2022

background-position-y

Задаёт положение фонового изображения внутри элемента по вертикали. Если для элемента установлено несколько фоновых изображений, то можно изменять положение каждого изображения, перечисляя значения через запятую.

Краткая информация

Значение по умолчанию top
Наследуется Нет
Применяется Ко всем элементам
Анимируется Да

Синтаксис

background-position-y: [top | center | bottom | <проценты> | <размер>]#

Значения

left Выравнивает фон по левому краю. Эквивалент записи 0 или 0%.
center Выравнивает фон по центру горизонтали. Эквивалент записи 50%.
right Выравнивает фон по правому краю. Эквивалент записи 100%.
<проценты> Задаёт положение фона в процентах от ширины элемента. Значение 0% или 0 выравнивает левый край фонового изображения по левому краю элемента. Значение 100% выравнивает правый край рисунка по правому краю элемента.
<размер> Задаёт положение фона в любых доступных для CSS единицах — пиксели (px), сантиметры (cm), em и др. относительно левого края элемента.

Пример

В данном примере при наведении курсора мыши на рисунок, фоновая картинка смещается вверх по вертикали, показывая цветной рисунок вместо чёрно-белого.

Объектная модель

Объект.style.backgroundPositionY

Браузеры

background-position-y

Посмотреть совместимость на Can I use?

background-position-y