Свойство CSS background-position
Свойство CSS background-position определяет начальную позицию background-image.
По умолчанию фоновое изображение размещается в верхнем левом углу элемента. Если для фона установлено повторение, оно будет повторяться как по вертикали, так и по горизонтали.
| Начальное значение | 0% 0% |
|---|---|
| Применяется к | Ко всем элементам. Также применяется к ::first-letter и ::first-line. |
| Наследуется | Нет. |
| Анимируемое | Да. Позицию можно изменять. |
| Версия | CSS1 |
| Синтаксис DOM | object.style.backgroundPosition = "center"; |
Синтаксис
Синтаксис свойства CSS background-position
css
background-position: value;Пример свойства background-position:
Пример использования свойства CSS background-position со значением по умолчанию
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
padding: 102px;
background-image: url("https://ru.w3docs.com/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: left top;
}
</style>
</head>
<body>
<h2>Background-position property example</h2>
<p>The background-image is positioned at the left-top corner of the element.</p>
</body>
</html>Результат
Пример свойства background-position, заданного в процентах:
Пример использования свойства CSS background-position со значением в % (проценты)
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-image: url("https://ru.w3docs.com/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50% 15%;
}
</style>
</head>
<body>
<h2>Background-position property example</h2>
<p>
The background-image is positioned 50% from the left side and 15% from the top side of the element.
</p>
</body>
</html>Пример свойства background-position в пикселях:
Пример использования свойства CSS background-position со значением в px
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
padding: 100px;
background-image: url("https://ru.w3docs.com/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png");
background-attachment: fixed;
background-position: 5px 50px;
}
</style>
</head>
<body>
<h2>Background-position property example</h2>
<p>
The background-image is positioned 5px from the left, and 50px down from the top.
</p>
</body>
</html>Пример свойства background-position со значением "right 100px":
Пример свойства background-position со значением "right 100px":
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
padding: 100px;
background-image: url("https://ru.w3docs.com/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right 100px;
}
</style>
</head>
<body>
<h2>Background-position property example</h2>
<p>The background-image is positioned 100px from the right edge, vertically centered.</p>
</body>
</html>Пример свойства background-position со значением "center center":
Пример свойства background-position со значением "center center":
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
padding: 102px;
background-image: url("https://ru.w3docs.com/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png");
background-attachment: fixed;
background-position: center center;
}
</style>
</head>
<body>
<h2>Background-position property example</h2>
<p>The background-image is positioned center.</p>
</body>
</html>Значения
| Значение | Описание | Запустить |
|---|---|---|
left, center, right, top, bottom | Задаёт позицию background-image. Если указано только одно значение, второе по умолчанию принимает center. | Запустить » |
x% y% | Первое значение задаёт горизонтальную позицию, второе — вертикальную. 0% 0% — это верхний левый угол. 100% 100% — нижний правый угол. Если указано только одно значение, второе по умолчанию принимает 50%. | Запустить » |
xpos ypos | Первое значение задаёт горизонтальную позицию, второе — вертикальную. Единицы измерения могут быть пикселями (например, 0px 0px). | Запустить » |
initial | Устанавливает свойство в его значение по умолчанию. | Запустить » |
inherit | Наследует свойство от родительского элемента. |
Практика
Какие параметры можно использовать в свойстве CSS background-position для указания позиции фонового изображения?