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

background-position-x

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

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

Демо

Фон

Синтаксис

 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-x: left;
background-position-x: center;
background-position-x: right;

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

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

/* Side-relative values */
background-position-x: right 3px;
background-position-x: left 25%;

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

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

Значения

left

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

center

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

right

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

<проценты>

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

<размер>

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

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

1
background-position-x: left;

Применяется ко всем элементам

Спецификации

Поддержка браузерами

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-x</title>
        <style>
            .clock {
                background: url('/example/image/clock-sprite.png')
                    no-repeat;
                width: 128px;
                height: 128px;
            }
            .clock:hover {
                background-position-x: 100%;
            }
        </style>
    </head>
    <body>
        <div class="clock"></div>
    </body>
</html>

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

Комментарии