background-position-x
Обновлено: 15.12.2022
background-position-x
Задаёт положение фонового изображения внутри элемента по горизонтали. Если для элемента установлено несколько фоновых изображений, то можно изменять положение каждого изображения, перечисляя значения через запятую.
Краткая информация
| Значение по умолчанию | left |
| Наследуется | Нет |
| Применяется | Ко всем элементам |
| Анимируется | Да |
Синтаксис
background-position-x: [ left | center | right | <проценты> | <размер> ]#
Значения
| left | Выравнивает фон по левому краю. Эквивалент записи 0 или 0%. |
| center | Выравнивает фон по центру горизонтали. Эквивалент записи 50%. |
| right | Выравнивает фон по правому краю. Эквивалент записи 100%. |
| <проценты> | Задаёт положение фона в процентах от ширины элемента. Значение 0% или 0 выравнивает левый край фонового изображения по левому краю элемента. Значение 100% выравнивает правый край рисунка по правому краю элемента. |
| <размер> | Задаёт положение фона в любых доступных для CSS единицах — пиксели (px), сантиметры (cm), em и др. относительно левого края элемента. |
Пример
В данном примере при наведении курсора мыши на рисунок, фоновая картинка смещается по горизонтали, показывая цветной рисунок вместо чёрно-белого.
Объектная модель
Объект.style.backgroundPositionX