CSS background-position-x Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The background-position-x CSS property is a part of the background positioning properties used to control the horizontal placement of a background image within its containing element. It allows web developers to specify the precise position of the background image along the X-axis (horizontal axis) relative to the element's padding box. By setting a value for background-position-x, such as a length measurement or a percentage, developers can achieve fine-grained control over the horizontal alignment of background images, helping to create visually appealing and customized layouts for web pages. This property works in conjunction with background-position-y, which controls the vertical positioning of the background image.

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></div>

CSS

div {
  width: 250px;
  height: 250px;
  background-color: skyblue;
  background-image: url(images/icon2.png);
  background-repeat: no-repeat;
  background-position-x: left;
  background-position-y: bottom;
}

Result

Editor