background-position-y
CSS background-position-y Property
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
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/w3cdoc-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/w3cdoc-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/w3cdoc-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/w3cdoc-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/w3cdoc-logo-black.png") no-repeat;
background-position-y: 70%;
}
</style>
</head>
<body>
<h2>Background-position-y property example</h2>
</body>
</html>
Values
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. |