CSS background-position-x Property

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