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; /* Измените размер фонового изображения, чтобы оно покрывало весь контейнер */
}
Попробуйте сами »
Страницы по теме background-position-x
CSS Учебник: CSS Background
CSS Справочник: background-image свойство
CSS Справочник: background-position свойство
CSS Справочник: background-position-y свойство
HTML DOM справочник: backgroundPosition свойство