CSS свойство background-position-x

Свойство background-position-x устанавливает горизонтальное положение фона.

Одно или несколько значений могут быть указаны через запятые.

Отрицательные значения допустимы.

Это экспериментальное свойство.

Значение по умолчанию	left
Применяется	Ко всем элементам.
Наследуется	Нет
Анимируемое	Нет
Версия	CSS4
DOM синтаксис	object.style.backgroundPositionX = "right";

Синтаксис

background-position-x: left | center | right | length | percentage | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      body {
      background: #ccc url("/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png") repeat-y;
      background-position-x: 70%; 
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства background-position-x</h2>
  </body>
</html>

Попробуйте сами!

Пример со значением "center":

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      body {
      background: #ccc url("/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png") repeat-x;
      background-position-x: center; 
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства background-position-x</h2>
  </body>
</html>

Попробуйте сами!

Пример со значением "left":

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      body {
      background: #ccc url("/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png") repeat-y;
      background-position-x: left; 
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства background-position-x</h2>
  </body>
</html>

Попробуйте сами!

Значения

Значение	Описание
left	Выравнивает левый край фонового изображения по левому краю фонового позиционирующего слоя.
center	Выравнивает центр фонового изображения по центру фонового позиционирующего слоя.
right	Выравнивает правый край фонового изображения по правому краю фонового позиционирующего слоя.
length	Указывает смещение левого вертикального края фонового изображения от левого вертикального края фонового позиционирующего слоя.
percentage	Указывает смещение горизонтального положения фонового изображения относительно контейнера. 0% выравнивает левый край фонового изображения с левым краем контейнера, 100% выравнивает правый край фонового изображения с правым краем контейнера, а 50% горизонтально выравнивает по центру фоновое изображение.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Значение элемента наследуется от родительского элемента.