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