CSS background-position-x Property

The CSS background-position has two properties, one is background-position-x and the other is background-position-y. All background image default positions are in the top left corner. The background-position-x property in CSS is basically set the image position. It is set in the horizontal position. The background-position-x property in CSS allows one to move the image from left to right.

Syntax:

background-position-x: value;

Property Values

The background-position-x have certain values properties.

• background-position-x: left - It is used to set the image at the left position in the container.
• background-position-x: right - It is used to set the image at the right position in the container.
• background-position-x: center - It is used to set the image at the center position in the container.
• background-position-x: initial - It is used to set the image at the default value. Its default value is 0%.
• background-position-x: inherit - It is used to inherit the property value from its parent elements.

Example:

In this example, the background image will be positioned on the right side of the container.

body {
  background-image: url('images/lion.jpg');
  background-repeat: no-repeat;
  background-position-x: right;
}

In this example, The background image will be positioned center in the container.

body {
  background-image: url('images/lion.jpg');
  background-repeat: no-repeat;
  background-position-x: center;
}

In this example, The background image will be positioned 130px from the left side in the container.

body {
  background-image: url('images/lion.jpg');
  background-repeat: no-repeat;
  background-position-x: 130px;
}

Output: