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

Определение и использование

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

Совет:По умолчанию, фоновое изображение размещается в левом верхнем углу элемента и повторяется по вертикали и горизонтали.

Пример

Пример 1

Как локализовать фоновое изображение по оси x:

div {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-position-x: center;
background-size: cover; /* Изменить размер фонового изображения, чтобы покрыть весь контейнер */

}

Пример 2

Как локализовать фоновое изображение в правом положении:

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-position-x: right;
background-size: cover; /* Изменить размер фонового изображения, чтобы покрыть весь контейнер */

}

Пример 3

Как использовать процентную локализацию фонового изображения:

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-position-x: 50%;
background-size: cover; /* Изменить размер фонового изображения, чтобы покрыть весь контейнер */

}

Пример 4

Как использовать пиксельную локализацию фонового изображения:

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-position-x: 150px;
background-size: cover; /* Изменить размер фонового изображения, чтобы покрыть весь контейнер */

}

Пример 5

Создание фонового изображения, покрывающего контейнер, с использованием различных свойств фона:

.hero-image {
  background-image: url("photographer.jpg"); /* Используемое изображение */
  background-color: #cccccc; /* 如果图像不可用，则使用此颜色 */
  background-color: #cccccc; /* Если изображение недоступно, использовать этот цвет */
  height: 300px; /* Необходимо установить высоту */
  background-position-x: center; /* Поместить изображение по центру */
  background-repeat: no-repeat; /* Не повторять изображение */
background-size: cover; /* Изменить размер фонового изображения, чтобы покрыть весь контейнер */

}

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

CSS грамматика background-position-x:value

;

значение описание
left положить фоновое изображение в левый край оси x.
right положить фоновое изображение в правый край оси x.
center положить фоновое изображение в центр оси x.
x%

левый край оси x составляет 0%, правый край - 100%.

процентные значения представляют собой ширину области позиционирования фона минус ширина фонового изображения.
xpos горизонтальное расстояние от левого края. Единицы могут быть пикселями (например, 0px) или другими Единицы CSS.
xpos отступ

двухзначная грамматика, поддерживается только в Firefox и Safari.

  • xpos установить на left или right
  • отступ является горизонтальным расстоянием от левого или правого края фонового изображения

единицы могут быть пикселями или другими Единицы CSS.
initial установить этот атрибут в его значение по умолчанию. См.: initial.
inherit получает этот атрибут от родительского элемента. См.: inherit.

технические детали

по умолчанию: 0%
наследование: нет
создание анимации: поддерживается. См.:атрибуты, связанные с анимацией.
версия: CSS3
JavaScript грамматика: object.style.backgroundPositionX="center"

поддержка браузерами

Числа в таблице показывают версию первого браузера, который полностью поддерживает этот атрибут.

Chrome Edge Firefox Safari Opera
однозначная грамматика 1.0 12.0 49.0 1.0 15.0
двухзначная грамматика не поддерживается не поддерживается 49.0 15.4 не поддерживается

связанные страницы

учебник:Фон в CSS

CSS справочник:атрибут background-image

CSS справочник:атрибут background-position

CSS справочник:атрибут background-position-y

HTML DOM справочник:атрибут backgroundPosition