CSS background-position-x Property

CSS background-position-x Property

The background-position-x property in CSS controls the horizontal positioning of a background image within an element.

1. Syntax

selector {
  background-position-x: value;
}

2. Accepted Values

Value	Description
left (default)	The background image aligns to the left of the element.
center	The background image aligns to the horizontal center.
right	The background image aligns to the right.
<length>	Specifies an exact position in px, em, rem, etc.
<percentage>	Defines a position relative to the element’s width (e.g., 50% means center).

3. Example – Using background-position-x: center;

.box {
  width: 400px;
  height: 300px;
  background-image: url("image.jpg");
  background-position-x: center;
  background-repeat: no-repeat;
}

✅ The background image will be horizontally centered.

4. Example – Using background-position-x: right;

.box {
  width: 400px;
  height: 300px;
  background-image: url("image.jpg");
  background-position-x: right;
  background-repeat: no-repeat;
}

✅ The background image will be aligned to the right.

5. Example – Using Length (px or %)

.box {
  width: 400px;
  height: 300px;
  background-image: url("image.jpg");
  background-position-x: 50px;
  background-repeat: no-repeat;
}

✅ The background image is 50px from the left.

.box {
  width: 400px;
  height: 300px;
  background-image: url("image.jpg");
  background-position-x: 75%;
  background-repeat: no-repeat;
}

✅ The background image is placed 75% of the way across from the left.

6. Best Practices

✔ Use center for balanced positioning across different screen sizes.
✔ Use % values for responsive layouts.
✔ Combine with background-size for better control.