The background-position-x property controls the horizontal placement of a background image. It lets you move a background left or right without changing its vertical position.
Move backgrounds sideways.
left, center, right.
Relative x placement.
Exact left offsets.
Split axis control.
Related to background-position.
The background-position-x CSS property sets the horizontal starting position of a background image. It affects placement along the x-axis only, leaving the vertical position to background-position-y or the shorthand background-position.
This is useful when you want to align a decorative icon, badge, or photo to the left, center, or right while keeping vertical placement unchanged.
Use a small non-repeating background with a fixed background-size so horizontal movement is easy to see.
Apply background-position-x to control horizontal background placement:
selector {
background-position-x: <position>;
}.panel {
background-image: url("icon.svg");
background-repeat: no-repeat;
background-position-x: 50%;
background-position-y: top;
}0%, which aligns the background to the left.left, center, right, percentages, and lengths.background-position-y for vertical control.background-position: center top; is shorthand for both axes together.| Question | Answer |
|---|---|
| Initial value | 0% (left) |
| Applies to | Horizontal background placement |
| Inherited | No |
| Animatable | Yes |
| Common use | Left/right icons, centered hero focal points, horizontal offsets |
The initial value of background-position-x is 0%. That places the background at the left edge of the background positioning area.
These are the most common ways to set horizontal background placement with background-position-x.
| Value | Example | Meaning |
|---|---|---|
left | background-position-x: left; | Aligns the background to the left edge |
center | background-position-x: center; | Centers the background horizontally |
right | background-position-x: right; | Aligns the background to the right edge |
| Percentage | background-position-x: 50%; | Positions relative to element width |
| Length | background-position-x: 24px; | Offsets the background by an exact distance |
leftPlaces the background at the left edge of the positioning area.
Default-like alignment.
centerCenters the background horizontally inside the element.
Common for hero images.
rightAligns the background to the right edge.
Useful for corner badges.
75%Moves the background toward the right using a percentage.
Responsive horizontal placement.
background-position-x vs background-position| Property | Controls | Best for |
|---|---|---|
background-position-x | Horizontal background placement only | Left/center/right alignment without changing y-axis |
background-position | Both horizontal and vertical placement | One-line positioning such as center top |
background-position-y | Vertical background placement only | Top/center/bottom alignment without changing x-axis |
These panels keep the same vertical position and change only the horizontal value:
background-position-y: center; stays the same in all three panels.
Try background-position-x with percentages, left/right keywords, pixel offsets, and a multi-value comparison.
Control where a background sits along the x-axis while vertical placement stays separate.
Place a background at the horizontal center while keeping it at the top vertically.
.panel {
background-image: url("icon.svg");
background-repeat: no-repeat;
background-position-x: 50%;
background-position-y: top;
}background-position-x: 50%; centers the background horizontally, while background-position-y: top; keeps it at the top.
Compare the two most common horizontal keyword positions.
.left { background-position-x: left; }
.right { background-position-x: right; }The same background marker moves to opposite horizontal edges using keyword values.
Use pixel and percentage values when keywords are not precise enough.
Move a background a fixed distance from the left edge.
.panel {
background-position-x: 24px;
background-position-y: center;
}A length value offsets the background horizontally by an exact amount from the left edge.
See how different background-position-x values move the same marker sideways.
.left { background-position-x: left; }
.center { background-position-x: center; }
.percent { background-position-x: 75%; }Only the horizontal value changes, so the marker moves sideways while staying vertically centered.
background-position-x WorksSet an image or gradient with background-image.
Use background-position-x with left, center, right, percentages, or pixels.
Control the y-axis with background-position-y or the shorthand background-position.
You can align backgrounds to the left, center, or right without affecting vertical placement.
background-position-x is supported in all modern browsers and works reliably for horizontal background placement.
Chrome, Firefox, Safari, Edge, and Opera support keyword, percentage, and length values.
In older browsers, use the shorthand background-position as a fallback when split-axis properties are unavailable.
background-position instead of split x/y propertiesBottom line: Use background-position-x confidently in modern projects, especially with background-position-y for split-axis control.
The background-position-x property gives you direct control over horizontal background placement. It is especially useful when you want to align an image left, center, or right without changing its vertical position.
Pair it with background-position-y for full two-axis control, or use background-position when a single shorthand declaration is enough.
left, center, and right for simple horizontal alignmentbackground-position-y when axes need separate controlbackground-position fallback for older browsers if neededbackground-position-x with the full shorthand property0%)background-position-xUse these points when placing backgrounds horizontally.
Controls the x-axis.
Purposeleft, center, right.
ValuesResponsive x placement.
ResponsiveLeft edge by default.
DefaultSplit axis control.
CompareOpen the HTML editor, move backgrounds horizontally, and experiment with background-position-x instantly.
5 people found this page helpful