background-position-x

Definition

The background-position-x property in CSS specifies the horizontal position of a background image. It can be used to position the background image horizontally within the element's content, padding, or border.

Examples

Positioning the background image at the left edge of the element:

.left {
  width: 200px;
  height: 200px;
  background-image: url('image.jpg');
  background-position-x: left;
}

Centering the background image horizontally within the element:

.center {
  width: 200px;
  height: 200px;
  background-image: url('image.jpg');
  background-position-x: center;
}

Positioning the background image at the right edge of the element:

.right {
  width: 200px;
  height: 200px;
  background-image: url('image.jpg');
  background-position-x: right;
}

Positioning the background image 50 pixels from the left edge of the element:

.distance {
  width: 200px;
  height: 200px;
  background-image: url('image.jpg');
  background-position-x: 50px;
}

Positioning the background image 50% of the element's width from the left edge:

.percentage {
  width: 200px;
  height: 200px;
  }

Values

Best Practices

• Use background-position-x to specify the horizontal position of a background image.
• The default value for background-position-x is left, which means that the background image is positioned at the left edge of the element.
• Use background-position-x in combination with other background properties, such as background-image, background-color, and background-position-y, to create more complex and customized backgrounds.
• You can specify the position of the background image in pixels, ems, or percentages using the <length> and <percentage> values for background-position-x.
• Use the background-position-x property in conjunction with the background-position-y property to specify the position of the background image in two dimensions.
• Keep in mind that the background-position-x property only affects the positioning of the background image, not the size of the background. To specify the size of the background, use the background-size property.

Browser Compatibility