background-position-y CSS

Свойство background-position-y задаёт положение фонового изображения внутри элемента по вертикали.

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

Значение по умолчанию:

top

Наследуется:
Нет
Применяется:

Ко всем элементам

Анимируется:
Да
Спецификации:
Поддержка браузерами:

Can I Use background-position-x-y? Data on support for the background-position-x-y feature across the major browsers from caniuse.com.

Смещение краёв фона:

Can I Use css-background-offsets? Data on support for the css-background-offsets feature across the major browsers from caniuse.com.

Синтаксис

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

Значения

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

Примеры

<!doctype html>
<html>
 <head>
  <meta charset="utf-8">
  <title>background-position-y</title>
  <style>
   .heart { 
    background: url(/example/image/heart-sprite.png) no-repeat;
    width: 64px;
    height: 64px;
   }
   .heart:hover {
    background-position-y: -64px;
   }
  </style>
 </head>
 <body>
  <div class="heart"></div>
 </body>
</html>

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