background-position-x CSS

Свойство 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.

Синтаксис

background-position-x: [ left | center | right | <проценты> | <размер> ]#

Значения

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

Примеры

<!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>

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