CSS background-position-x Property

Definition and Usage

The background-position-x property sets the horizontal starting place of each background-image. The place is measured inside the area from background-origin. Vertical place stays as it is, or you set it with background-position-y.

The initial value is 0% (left). The property is not inherited. A later background or background-position declaration overrides it. Pair it with background-repeat: no-repeat when you want one clear marker.

CSS Syntax

Separate multiple images with commas. The keyword comes before a side offset: right 20px, not 20px right.

Property Values

How to Use background-position-x

Give the element an image, keep one copy visible, then set only the horizontal place.

1. Set a background-image on the element. Without an image, there is nothing to place.
2. Give the element a visible size. Content or a height is enough.
3. Use background-repeat: no-repeat when you want one image, not a tile.
4. Set background-position-x for the horizontal place. Use background-position-y if you also need the vertical place.

Live Preview

One blue marker, kept vertically centered. Change background-position-x and watch it move left and right.

CSS Examples

Each snippet adds only what background-position-x needs: an image, a sized box, and no-repeat so the mark is clear. Use Try It Yourself for a live editor.

<style>
  div {
    height: 160px;
    border: 1px solid #ccc;
    background-color: #eff6ff;
    background-image: radial-gradient(circle, #2563eb 0 28px, transparent 29px);
    background-repeat: no-repeat;
    background-size: 72px 72px;
    background-position-y: center;
    background-position-x: center;
  }
</style>

<div></div>

<style>
  div {
    height: 160px;
    border: 1px solid #ccc;
    background-color: #ecfdf5;
    background-image: radial-gradient(circle, #059669 0 28px, transparent 29px);
    background-repeat: no-repeat;
    background-size: 72px 72px;
    background-position-y: center;
    background-position-x: 25%;
  }
</style>

<div></div>

<style>
  div {
    height: 160px;
    border: 1px solid #ccc;
    background-color: #fff7ed;
    background-image: radial-gradient(circle, #ea580c 0 28px, transparent 29px);
    background-repeat: no-repeat;
    background-size: 72px 72px;
    background-position-y: center;
    background-position-x: right 20px;
  }
</style>

<div></div>

Key Takeaways