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

Браузери

background-position-x

Переглянути сумісність з Can I use?

background-position-x