background-position-x

Пример

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

div {
background-image: url('sw3css.gif');
background-repeat: no-repeat;
background-position-x: center;
}

Определение background-position-x

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

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

Показ демо ❯

Значение по умолчанию:	0%
Унаследовано:	no
Анимируемый:	yes. Читайте о animatable Попробуй
Версия:	CSS3
JavaScript синтаксис:	object.style.backgroundPositionX="center" Попробуй

Поддержка background-position-x

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

Свойство
background-position-x	1.0	12.0	49.0	1.0	15.0
background-position-x (с двумя значениями синтаксиса)	Не поддерживается	Не поддерживается	49.0	15.4	Не поддерживается

Синтаксис background-position-x

background-position-x: value;

Значения background-position-x

Значение	Описание	Демонстрация
left	Расположите фон с левой стороны по оси x.	Демо ❯
right	Positions background right side on x-axis.	Демо ❯
center	Размещает центр фона по оси x.	Демо ❯
x%	Левая сторона равна 0% по оси x, а правая сторона равна 100%. Процентное значение относится к ширине области позиционирования фона минус ширина фонового изображения.	Демо ❯
xpos	Расстояние по горизонтали от левой стороны. Единицами измерения могут быть пиксели (0px) или любые другие CSS единицы измерения.	Демо ❯
xpos offset	Синтаксис с двумя значениями, поддерживается только в Firefox и Safari. - xpos имеет значение "влево" или "вправо". - offset - это расстояние по горизонтали от фонового изображения и "левой" или "правой" стороны, заданное с помощью xpos. Единицами измерения могут быть пиксели или любые другие CSS единицы измерения.
initial	Устанавливает для этого свойства значение по умолчанию. Читайте о initial
inherit	Наследует это свойство от своего родительского элемента. Читайте о inherit

Примеры background-position-x

Пример

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

body {
background-image: url('sw3css.gif');
background-repeat: no-repeat;
background-position-x: right;
}

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

Пример

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

body {
background-image: url('sw3css.gif');
background-repeat: no-repeat;
background-position-x: 50%;
}

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

Пример

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

body {
background-image: url('sw3css.gif');
background-repeat: no-repeat;
background-position-x: 150px;
}

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

Пример

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

.hero-image {
background-image: url("photographer.jpg"); /* Используемое изображение */
background-color: #cccccc; /* Используется, если изображение недоступно */
height: 300px; /* Вы должны установить указанную высоту */
background-position-x: center; /* Center the image */
background-repeat: no-repeat; /* Не повторяйте изображение */
background-size: cover; /* Измените размер фонового изображения, чтобы оно покрывало весь контейнер */
}

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