Свойство CSS background-position-y
Свойство CSS background-position-y задаёт вертикальное положение фонового изображения. Примеры и демонстрации.
Свойство CSS background-position-y задаёт вертикальное положение фонового изображения внутри элемента. Оно является вертикальной половиной сокращённого свойства background-position: если background-position принимает одновременно горизонтальное и вертикальное значение, то background-position-y управляет только смещением вверх/вниз, оставляя смещение влево/вправо свойству background-position-x.
Это свойство удобно использовать, когда нужно сдвинуть фоновое изображение по вертикали без повторного указания горизонтального значения — например, чтобы закрепить водяной знак в нижней части секции-обложки или точнее задать начало шаблона. Если у элемента несколько фоновых изображений, можно указать отдельное значение для каждого слоя, разделив их запятыми; каждое значение сопоставляется с соответствующим изображением.
Вертикальное смещение отсчитывается от области позиционирования фона (по умолчанию — поле padding элемента). Значение в единицах длины отсчитывается сверху вниз; процентное значение выравнивает соответствующие точки изображения и области (см. раздел Значения ниже).
Допустимы отрицательные значения — background-position-y: -20px сдвигает изображение вверх, за верхний край.
| Начальное значение | top |
|---|---|
| Применяется к | Всем элементам. |
| Наследуется | Нет. |
| Анимируется | Нет. |
| Версия | CSS3 |
| DOM Syntax | object.style.backgroundPositionY = "bottom"; |
Синтаксис
Значения CSS background-position-y
background-position-y: top | center | bottom | length | percentage | initial | inherit;Пример свойства background-position-y со значением "top":
Пример кода CSS background-position-y
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
html {
min-height: 100vh;
}
body {
padding-top: 30px;
background: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.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
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
html {
min-height: 100vh;
}
body {
background: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png") no-repeat;
background-position-y: bottom;
}
</style>
</head>
<body>
<h2>Background-position-y property example</h2>
</body>
</html>Пример свойства background-position-y со значением "center":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
html {
min-height: 100vh;
}
body {
background: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png") no-repeat;
background-position-y: center;
}
</style>
</head>
<body>
<h2>Background-position-y property example</h2>
</body>
</html>Пример свойства background-position-y со значением длины:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
html {
min-height: 100vh;
}
body {
padding-top: 30px;
background: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png") no-repeat;
background-position-y: 90px;
}
</style>
</head>
<body>
<h2>Background-position-y property example</h2>
</body>
</html>Пример свойства background-position-y с процентным значением:
Проценты работают иначе, чем единицы длины. При использовании длины, например 90px, верхний край изображения располагается на 90px ниже верхнего края области. При использовании процентов точка на N% от верха изображения выравнивается с точкой на N% от верха области — таким образом, 0% соответствует top, 100% — bottom, а 50% — center. Именно это позволяет процентным значениям сохранять видимость увеличенного изображения независимо от высоты контейнера.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
html {
min-height: 100vh;
}
body {
padding-top: 30px;
background: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.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— задаёт горизонтальное и вертикальное положение одновременно в одном объявлении.background-position-x— горизонтальный аналог данного свойства.- Свойства CSS3 — обзор свойств, введённых в CSS3.