Свойство CSS background-position-x
Свойство CSS background-position-x задаёт горизонтальное положение фонового изображения. Синтаксис и примеры использования.
Свойство background-position-x задаёт горизонтальное положение (по оси X) фонового изображения внутри элемента. Оно является парным к background-position-y, которое управляет вертикальным положением. Вместе они образуют расширенную запись сокращённого свойства background-position.
По умолчанию background-image размещается в верхнем левом углу элемента и, если background-repeat не изменено, повторяется по всему элементу. Свойство background-position-x позволяет сдвигать изображение влево или вправо, не затрагивая его вертикальное положение.
Если у элемента несколько фоновых изображений, можно указать для background-position-x список значений через запятую — по одному значению на каждый слой, в том же порядке, что и изображения:
/* two background layers, each positioned independently on the x-axis */
background-position-x: left, 20%;На этой странице описаны синтаксис, все допустимые значения, способ измерения процентов и длин, а также рабочие примеры.
Примечание
В современном CSS обычно удобнее использовать сокращённое свойство
background-position, которое задаёт обе оси одновременно.background-position-xнаиболее полезно, когда нужно анимировать или переопределить только горизонтальную ось, не трогая вертикальное положение.
Отрицательные значения допустимы — background-position-x: -30px сдвигает изображение за левый край.
| Начальное значение | left |
|---|---|
| Применяется к | Всем элементам. |
| Наследуется | Нет. |
| Анимируется | Нет. |
| Версия | CSS3 |
| DOM-синтаксис | object.style.backgroundPositionX = "right"; |
Синтаксис
Значения CSS background-position-x
background-position-x: left | center | right | length | percentage | initial | inherit;Пример свойства background-position-x:
Пример кода CSS background-position-x
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background: #ccc url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png") repeat-y;
background-position-x: 70%;
}
</style>
</head>
<body>
<h2>Background-position-x property example</h2>
</body>
</html>Результат
Пример свойства background-position-x со значением «center»:
Пример CSS background-position-x: center
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background: #ccc url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png") repeat-x;
background-position-x: center;
}
</style>
</head>
<body>
<h2>Background-position-x property example</h2>
</body>
</html>Пример свойства background-position-x со значением «left»:
Пример CSS background-position-x: left
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background: #ccc url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png") repeat-y;
background-position-x: left;
}
</style>
</head>
<body>
<h2>Background-position-x property example</h2>
</body>
</html>Пример свойства background-position-x со значением «length»:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background: #ccc url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png") repeat-y;
background-position-x: 30px;
}
</style>
</head>
<body>
<h2>Background-position-x property example</h2>
</body>
</html>Как измеряются проценты и длины
Распространённый источник путаницы — разница между процентами и длинами:
- Длина (
30px,2rem) сдвигает левый край изображения от левого края области позиционирования на указанное значение. - Процент выравнивает одинаковую относительную точку изображения с той же относительной точкой области. Таким образом,
0%совмещает левые края,100%совмещает правые края, а50%центрирует изображение. Именно поэтому процент больше0%не просто сдвигает изображение на «столько-то процентов ширины» — он интерполирует между двумя краями.
Ключевые слова являются сокращениями для этих процентов: left = 0%, center = 50%, right = 100%.
Значения
| Значение | Описание |
|---|---|
| left | Выравнивает левый край фонового изображения по левому краю слоя позиционирования фона. |
| center | Выравнивает центр фонового изображения по центру слоя позиционирования фона. |
| right | Выравнивает правый край фонового изображения по правому краю слоя позиционирования фона. |
| length | Фиксированное смещение (например, 30px или 2rem) левого края изображения от левого края области позиционирования. Отрицательные длины допустимы и сдвигают изображение за левый край. |
| percentage | Задаёт смещение горизонтального положения фонового изображения относительно контейнера. 0% совмещает левый край фонового изображения с левым краем контейнера, 100% — правый край с правым краем контейнера, 50% — центрирует изображение по горизонтали. |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Поддержка браузерами
background-position-x поддерживается во всех современных браузерах, включая Chrome, Firefox, Safari и Edge. Свойство широко доступно, однако поскольку оно было стандартизировано позже сокращённого background-position, предпочтительнее использовать сокращённую форму, когда нужно задать обе оси, и прибегать к расширенной записи только тогда, когда требуется управлять или анимировать исключительно горизонтальную ось.
Связанные свойства
background-position— сокращённое свойство, задающее обе оси одновременно.background-position-y— вертикальный аналог данного свойства.background-image— определяет позиционируемое изображение.background-repeat— управляет тем, повторяется ли изображение и каким образом.