Свойство CSS background-position-x
Свойство background-position-x задаёт горизонтальное положение слоя фонового изображения. Можно указать одно или несколько значений, разделённых запятыми.
По умолчанию background-image позиционируется в верхнем левом углу элемента и повторяется как по горизонтали, так и по вертикали.
Примечание
В современном CSS рекомендуется использовать сокращённое свойство
background-position, посколькуbackground-position-xредко используется отдельно.
INFO
Отрицательные значения допустимы.
| Начальное значение | left |
|---|---|
| Применяется к | Всем элементам. |
| Наследуется | Нет. |
| Анимация | Нет. |
| Версия | CSS3 |
| Синтаксис DOM | object.style.backgroundPositionX = "right"; |
Синтаксис
Значения CSS background-position-x
css
background-position-x: left | center | right | length | percentage | initial | inherit;Пример свойства background-position-x:
Пример кода CSS background-position-x
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background: #ccc url("https://ru.w3docs.com/build/images/w3docs-logo-black.png") repeat-y;
background-position-x: 70%;
}
</style>
</head>
<body>
<h2>Background-position-x property example</h2>
</body>
</html>Результат
Пример свойства background-position-x со значением "center":
Пример CSS background-position-x center
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background: #ccc url("https://ru.w3docs.com/build/images/w3docs-logo-black.png") repeat-x;
background-position-x: center;
}
</style>
</head>
<body>
<h2>Background-position-x property example</h2>
</body>
</html>Пример свойства background-position-x со значением "left":
Пример CSS background-position-x left
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background: #ccc url("https://ru.w3docs.com/build/images/w3docs-logo-black.png") repeat-y;
background-position-x: left;
}
</style>
</head>
<body>
<h2>Background-position-x property example</h2>
</body>
</html>Пример свойства background-position-x со значением "length":
Пример свойства background-position-x со значением "length":
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background: #ccc url("https://ru.w3docs.com/build/images/w3docs-logo-black.png") repeat-y;
background-position-x: 30px;
}
</style>
</head>
<body>
</body>
</html>Значения
| Значение | Описание |
|---|---|
| left | Задает выравнивание левого края фонового изображения по левому краю слоя позиционирования фона. |
| center | Задает выравнивание центра фонового изображения по центру слоя позиционирования фона. |
| right | Задает выравнивание правого края фонового изображения по правому краю слоя позиционирования фона. |
| length | Задает смещение левого вертикального края заданного фонового изображения от левого вертикального края слоя позиционирования фона. |
| percentage | Задает смещение горизонтального положения фонового изображения относительно контейнера. 0% выравнивает левый край фонового изображения по левому краю контейнера, 100% — правый край по правому краю контейнера, а 50% центрирует фоновое изображение по горизонтали. |
| initial | Устанавливает свойству его значение по умолчанию. |
| inherit | Наследует свойство от родительского элемента. |
Практика
Какова функция свойства CSS background-position-x?