CSS background-position-x Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The background-position-x property in CSS is used to control the horizontal placement of a background image within an element. By adjusting this property, developers can precisely position a background image along the x-axis without affecting its vertical placement. This can be particularly useful when dealing with complex designs or when layering multiple background images, as it allows for fine-tuned control over how each image aligns within its container. While background-position controls both horizontal and vertical placement together, background-position-x isolates the horizontal component, making adjustments more granular and easier to manage in certain scenarios.

In practical terms, background-position-x can accept values such as keywords (e.g., left, center, right) or length/percentage units (e.g., 50%, 100px). This flexibility allows designers to either anchor the image to a specific edge or position it proportionally within the element. For example, using a percentage value allows the background image to maintain its relative alignment even as the size of the container changes, which is essential for responsive designs. This property works in tandem with background-position-y to fully control image placement, giving developers the ability to independently tweak horizontal and vertical alignments for precise visual results.

It is also worth noting that background-position-x interacts with other background-related properties like background-size and background-repeat. For instance, when a background image is set to cover or contain, the effective horizontal position might appear different than when the image is at its original size, as the image is scaled to fit the container. Similarly, when a background is set to repeat, the starting horizontal position specified by background-position-x determines where the tiling begins. Understanding how background-position-x collaborates with these properties is essential for creating visually consistent and dynamic backgrounds.

Definition

Initial value: 0%
Applies to: all elements
Inherited: no
Computed value: A list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keyword
Animatable: a repeatable list
JavaScript syntax: object.style.backgroundPositionX

Interactive Demo

background-position-x: left;

background-position-x: center;

background-position-x: right;

background-position-x: 3.5rem;

background-position-x: 35%;

Syntax

background-position-x: left | center | right | <percentage> | <size>

Values

leftAligns the background to the left. Equivalent to writing 0 or 0%.
centerAligns the background horizontally to the center. Equivalent to 50% entry.
rightAligns the background to the right. Record equivalent to 100%.
<percentage>Sets the background position as a percentage of the elements width. A value of 0% or 0 aligns the left edge of the background image to the left edge of the element. A value of 100% aligns the right edge of the picture with the right edge of the element.
<size>Sets the position of the background in any units available for CSS - pixels (px), centimeters (cm), em, etc. relative to the left edge of the element.

Example

HTML

<div class='example'>

  <div class='box left'>background-position-x: left;</div>

  <div class='box center'>background-position-x: center;</div>

  <div class='box right'>background-position-x: right;</div>

</div>

CSS

/* Container */
.example {
  display: flex;
  gap: 20px;
  padding: 24px;
  background: #f4f6f8;
  align-items: center;
  justify-content: center;
}

/* Reusable box style */
.box {
  width: 220px;
  height: 140px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  color: #263238;
  background-color: #ffffff;

  /* A circular accent drawn by a radial gradient so the horizontal position is visible */
  background-image: radial-gradient(circle, #ff6b6b 36%, rgba(0,0,0,0) 37%);
  background-repeat: no-repeat;
  background-size: 30% 60%;
  background-position-y: center; /* keep vertical centered */
}

/* Different horizontal positions using background-position-x */
.box.left {
  background-position-x: left;    /* same as 0% */
}

.box.center {
  background-position-x: center;  /* same as 50% */
}

.box.right {
  background-position-x: right;   /* same as 100% */
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS background-position-x property. Hover over a browser icon to see the version that first introduced support for this CSS property.