The background-position-x
property is a CSS property that allows you to set the horizontal position of a background image. It is used in conjunction with the background-image
property to specify the location of the image on the x-axis.
The background-position-x
property is a shorthand property for setting the background-position
property. The background-position
property allows you to set both the horizontal and vertical position of a background image, while the background-position-x
property only sets the horizontal position.
The value of the background-position-x
property can be specified in different units such as pixels, percentages, or keywords like left, center, and right. The default value is left
.
Here are some examples of how to use the background-position-x
property:
<!-- Using pixels -->
<div style="background-image: url('image.jpg'); background-position-x: 50px;"></div>
<!-- Using percentages -->
<div style="background-image: url('image.jpg'); background-position-x: 50%;"></div>
<!-- Using keywords -->
<div style="background-image: url('image.jpg'); background-position-x: center;"></div>
In the first example, the background image is positioned 50 pixels from the left edge of the element. In the second example, the background image is positioned 50% from the left edge of the element. In the third example, the background image is centered horizontally within the element.
You can also use the background-position-x
property in combination with the background-position-y
property to set both the horizontal and vertical position of a background image:
<div style="background-image: url('image.jpg'); background-position-x: center; background-position-y: top;"></div>
In this example, the background image is centered horizontally and positioned at the top of the element.
The background-position-x
property is supported in all modern browsers, including Chrome, Firefox, Safari, and Edge. It is not supported in Internet Explorer.
The background-position-x
property is a useful CSS property for positioning background images horizontally within an element. It can be used in combination with the background-position-y
property to set both the horizontal and vertical position of a background image. While it is not supported in Internet Explorer, it is widely supported in modern browsers.