background-position-y CSS

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

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

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

top

Значение по умолчанию:
`top`
Наследуется:
Нет
Применяется:

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

Применяется:
Ко всем элементам
Анимируется:
Да
Спецификации:
Спецификации:
* [CSS Backgrounds and Borders Module Level 4](https://drafts.csswg.org/css-backgrounds-4/#background-position-longhands)
Поддержка браузерами:

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.

Поддержка браузерами:
<p class="ciu_embed" data-feature="background-position-x-y" data-periods="future_1,current,past_1,past_2"> <a href="http://caniuse.com/#feat=background-position-x-y">Can I Use background-position-x-y?</a> Data on support for the background-position-x-y feature across the major browsers from caniuse.com. </p> Смещение краёв фона: <p class="ciu_embed" data-feature="css-background-offsets" data-periods="future_1,current,past_1,past_2"> <a href="http://caniuse.com/#feat=css-background-offsets">Can I Use css-background-offsets?</a> Data on support for the css-background-offsets feature across the major browsers from caniuse.com. </p>

Синтаксис

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

Синтаксис

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

Значения

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

Значения

* `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>

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

Примеры

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

Содержание

  • Синтаксис
      background-position-y: [top | center | bottom | <проценты> | <размер>]#
  • Значения
    • Примеры
        <!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> В данном примере при наведении курсора мыши на рисунок, фоновая картинка смещается вверх по вертикали, показывая цветной рисунок вместо чёрно-белого.

    В начало