Перейти к содержанию

background-position-y

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

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

Демо

Фон

Синтаксис

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/* Keyword values */
background-position-y: top;
background-position-y: center;
background-position-y: bottom;

/* <percentage> values */
background-position-y: 25%;

/* <length> values */
background-position-y: 0px;
background-position-y: 1cm;
background-position-y: 8em;

/* Side-relative values */
background-position-y: bottom 3px;
background-position-y: bottom 10%;

/* Multiple values */
background-position-y: 0px, center;

/* Global values */
background-position-y: inherit;
background-position-y: initial;
background-position-y: unset;

Значения

top

Выравнивает фон по верхнему краю. Эквивалент записи 0 или 0%.

center

Выравнивает фон по центру вертикали. Эквивалент записи 50%.

bottom

Выравнивает фон по нижнему краю. Эквивалент записи 100%.

<проценты>

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

<размер>

Задаёт положение фона в любых доступных для CSS единицах — пиксели (px), сантиметры (cm), em и др. относительно верхнего края элемента.

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

1
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.

Описание и примеры

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<!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>

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

Комментарии