CSS CSS Tutorial CSS Advanced CSS Responsive Web Design(RWD) CSS Grid CSS Properties Sass Tutorial Sass Functions



background-position-x

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.

Examples

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.

Browser Support

The background-position-x property is supported in all modern browsers, including Chrome, Firefox, Safari, and Edge. It is not supported in Internet Explorer.

Conclusion

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.

References

Activity