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 Значение элемента наследуется от родительского элемента.

Поддержка браузера

4.0+ 12.0+ 49.0+ 3.1+ 15.0+


Считаете ли это полезным?

Похожие статьи