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