background-position-x
CSS background-position-x Property
The background-position-x property sets the horizontal position for each background. One or more values can be specified separated by commas.
By default, a background-image is positioned at the element’s top-left corner and repeated both horizontally and vertically.
Negative values are valid.
| 类目 | 类目 |
|---|---|
| Initial Value | left |
| Applies to | All elements. |
| Inherited | No. |
| Animatable | No. |
| Version | CSS3 |
| DOM Syntax | object.style.backgroundPositionX = “right”; |
Syntax
Syntax
background-position-x: left | center | right | length | percentage | initial | inherit;
Example of the background-position-x property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background: #ccc url("/build/images/w3cdoc-logo-black.png") repeat-y;
background-position-x: 70%;
}
</style>
</head>
<body>
<h2>Background-position-x property example</h2>
</body>
</html>
Result
Example of the background-position-x property with the “center” value:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background: #ccc url("/build/images/w3cdoc-logo-black.png") repeat-x;
background-position-x: center;
}
</style>
</head>
<body>
<h2>Background-position-x property example</h2>
</body>
</html>
Example of the background-position-x property with the “left” value:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background: #ccc url("/build/images/w3cdoc-logo-black.png") repeat-y;
background-position-x: left;
}
</style>
</head>
<body>
<h2>Background-position-x property example</h2>
</body>
</html>
Example of the background-position-x property with the “length” value:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background: #ccc url("/build/images/w3cdoc-logo-black.png") repeat-y;
background-attachment: fixed;
background-position-x: 30px;
}
</style>
</head>
<body>
</body>
</html>
Values
Values
| Value | Description |
|---|---|
| left | Specifies the alignment of the left edge of the background image with the left 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. |
| right | Specifies the alignment of the right edge of the background image with the right edge of the background position layer. |
| length | Specifies the offset of the given background image’s left vertical edge from the background position layer’s left vertical edge. |
| percentage | Specifies the offset of the background image’s horizontal 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. |