CSS background-position-x Property
The background-position-x CSS property specifies the horizontal position of a background-image. See the Syntax and practice with examples.
The background-position-x property sets the horizontal (x-axis) position of a background image inside its element. It is the counterpart of background-position-y, which controls the vertical position. Together they make up the longhand version of the background-position shorthand.
By default, a background-image is positioned at the element's top-left corner and, unless background-repeat is changed, tiled across the whole element. Setting background-position-x lets you nudge the image left or right without touching its vertical placement.
When an element has more than one background image, you can give background-position-x a comma-separated list — one value per layer, in the same order the images are listed:
/* two background layers, each positioned independently on the x-axis */
background-position-x: left, 20%;This page covers the syntax, every accepted value, how percentages and lengths are measured, and worked examples you can run.
Note
In modern CSS it is usually clearer to use the
background-positionshorthand, which sets both axes at once.background-position-xis most useful when you want to animate or override only the horizontal axis and leave the vertical position untouched.
Negative values are valid — background-position-x: -30px shifts the image off the left edge.
| Initial Value | left |
|---|---|
| Applies to | All elements. |
| Inherited | No. |
| Animatable | No. |
| Version | CSS3 |
| DOM Syntax | object.style.backgroundPositionX = "right"; |
Syntax
CSS background-position-x values
background-position-x: left | center | right | length | percentage | initial | inherit;Example of the background-position-x property:
CSS background-position-x code example
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background: #ccc url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.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:
CSS background-position-x center example
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background: #ccc url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.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:
CSS background-position-x left example
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background: #ccc url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.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("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png") repeat-y;
background-position-x: 30px;
}
</style>
</head>
<body>
<h2>Background-position-x property example</h2>
</body>
</html>How percentages and lengths are measured
A common source of confusion is the difference between percentages and lengths:
- A length (
30px,2rem) offsets the left edge of the image from the left edge of the positioning area by that amount. - A percentage aligns the same relative point of the image with the same relative point of the area. So
0%lines up the left edges,100%lines up the right edges, and50%centers the image. This is why a percentage greater than0%does not simply shift the image by "that many percent of the width" — it interpolates between the two edges.
The keywords are shorthands for these percentages: left = 0%, center = 50%, and right = 100%.
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 | A fixed offset (for example 30px or 2rem) of the image's left edge from the left edge of the positioning area. Negative lengths are allowed and move the image off the left side. |
| 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. |
Browser support
background-position-x is supported in all modern browsers, including Chrome, Firefox, Safari, and Edge. It is widely available, but because it was standardized later than the background-position shorthand, prefer the shorthand when you need to set both axes and only fall back to the longhand when you specifically want to control or animate the horizontal axis on its own.
Related properties
background-position— the shorthand that sets both axes at once.background-position-y— the vertical counterpart of this property.background-image— defines the image being positioned.background-repeat— controls whether and how the image tiles.