The background-position-y property sets the vertical position for each background.
One or more values can be specified separated by commas.
Negative values are valid.
Initial Value | top |
Applies to | All elements. |
Inherited | No. |
Animatable | No. |
Version | CSS3 |
DOM Syntax | object.style.backgroundPositionY = "bottom"; |
Syntax
background-position-y: top | center | bottom | length | percentage | initial | inherit;
Example of the background-position-y property with the "top" value:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
html {
height: 50%;
}
body {
padding-top: 30px;
background: url("/build/images/w3docs-logo-black.png") no-repeat;
background-position-y: top;
}
</style>
</head>
<body>
<h2>Background-position-y property example</h2>
</body>
</html>
Result
Example of the background-position-y property with the "bottom" value:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
html {
height: 50%;
}
body {
background: url("/build/images/w3docs-logo-black.png") no-repeat;
background-position-y: bottom;
}
</style>
</head>
<body>
<h2>Background-position-y property example</h2>
</body>
</html>
Example of the background-position-y property with the "center" value:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
html {
height: 50%;
}
body {
background: url("/build/images/w3docs-logo-black.png") no-repeat;
background-position-y: center;
}
</style>
</head>
<body>
<h2>Background-position-y property example</h2>
</body>
</html>
Example of the background-position-y property with the "length" value:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
html {
height: 50%;
}
body {
padding-top: 30px;
background: url("/build/images/w3docs-logo-black.png") no-repeat;
background-position-y: 90px;
}
</style>
</head>
<body>
<h2>Background-position-y property example</h2>
</body>
</html>
Example of the background-position-y property with the "percentage" value:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
html {
height: 50%;
}
body {
padding-top: 30px;
background: url("/build/images/w3docs-logo-black.png") no-repeat;
background-position-y: 70%;
}
</style>
</head>
<body>
<h2>Background-position-y property example</h2>
</body>
</html>
Values
Value | Description |
---|---|
top | Specifies the alignment of the top edge of the background image with the top edge of the background position layer. |
center | Specifies the alignment of the center of the background image with the center of the background position layer. |
bottom | Specifies the alignment of the bottom edge of the background image with the bottom of the background position layer. |
length | Specifies the offset of the given background image's left horizontal edge from the background position layer's left horizontal edge. |
percentage | Specifies the offset of the background image's vertical position relative to the container. 0% aligns the left edge of the background image with the left edge of the container, and 100% aligns the right edge of the background image with the right edge of the container, and 50% horizontally centers the background image. |
initial | Sets the property to its default value. |
inherit | Inherits the property from its parent element. |
Browser support
4.0+ | 49.0+ | 3.1+ | 15.0+ |
Practice Your Knowledge
What is the function of the 'background-position-y' property in CSS?
Correct!
Incorrect!
Quiz Time: Test Your Skills!
Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.