CSS background-position-x

The background-position-x property in CSS sets the horizontal position of a background image. This property is part of the shorthand background property, which allows you to set all background properties in one declaration.

The value of background-position-x can be specified using length units (such as pixels or percentages), keywords (like left, right, center), or the inherit keyword to specify that the value should be inherited from the parent element.

Here is an example of how to use the background-position-x property:

.box {
        width: 100%;
        height: 200px;
        background-image: url('example.jpg');
        background-position-x: center;
        background-repeat: no-repeat;      
        }
    <div class="box"></div>
  

In this example, we have a div element with a class of "box". We set a background image using the background-image property and then use the background-position-x property to center the image horizontally within the element.

You can experiment with different values for background-position-x to see how it affects the positioning of the background image.