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!

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

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

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

Browser Support

The following table will show you the current browser support for the CSS background-position-x property.

Desktop
Edge Chrome Firefox Opera Safari
12149151
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
1849181137

Last updated by CSSPortal on: 1st January 2024