CSS background-position-x Property

Posted in CSS Tutorial

Updated on Oct 01, 2024

By Mari Selvan

👁️ 18 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The background-position-x property in CSS allows you to define the horizontal position of a background image within an element.

This property is useful when you want to control where the background image appears along the x-axis (left to right) without affecting its position along the y-axis (top to bottom). It provides finer control over the placement of background images, especially when combined with other background-related properties.

💡 Syntax

The syntax for the background-position-x property is as follows:

Syntax

Copied

element {
  background-position-x: value;
}

🎛️ Default Value

The default value of the background-position-x property is 0%, meaning the background image will start from the left edge of the element.

🏠 Property Values

Value	Description
length	A specific distance from the left edge of the element, such as 10px, 20em, etc.
percentage	A percentage of the element’s width, such as 50%, 100%, etc.
left	Aligns the background image to the left edge of the element.
center	Centers the background image horizontally within the element.
right	Aligns the background image to the right edge of the element.

📄 Example

In this example, we will position a background image 50% from the left edge of a div element, effectively centering it horizontally.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS background-position-x Example</title>
  <style>
    .background-example {
      width: 300px;
      height: 200px;
      background-image: url('background-image.jpg');
      background-repeat: no-repeat;
      background-position-x: 50%;
      background-position-y: top;
      border: 1px solid #ccc;
    }
  </style>
</head>
<body>
  <h1>Background Position X Example</h1>
  <div class="background-example"></div>
</body>
</html>

🖥️ Browser Compatibility

The background-position-x property is widely supported in all modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. It also works in older versions of Internet Explorer (IE9 and above). Nevertheless, it's always good practice to test your website across different browsers to ensure consistent behavior.

🎉 Conclusion

The background-position-x property provides a convenient way to control the horizontal placement of background images within an element. Whether you're aligning an image to the left, center, or right, this property allows you to achieve the desired positioning with precision. Combining it with background-position-y gives you full control over the background image's placement, making it a powerful tool for web design.