CSS background-origin Property

Posted in CSS Tutorial

Updated on Oct 01, 2024

By Mari Selvan

👁️ 17 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The background-origin property in CSS defines the positioning area of the background image. It specifies where the background image should be positioned relative to the element’s border, padding, or content box.

This property is particularly useful when you need precise control over how your background image is displayed within an element.

💡 Syntax

The syntax for the background-origin property is straightforward and allows you to choose from three possible values.

Syntax

Copied

element {
  background-origin: value;
}

🎛️ Default Value

The default value of the background-origin property is padding-box. This means the background image starts from the upper-left corner of the padding area of the element.

🏠 Property Values

Value	Description
border-box	The background image starts from the upper-left corner of the border box, which includes the padding and border.
padding-box	The background image starts from the upper-left corner of the padding box, which includes only the padding area (default).
content-box	The background image starts from the upper-left corner of the content box, which excludes padding and border.

📄 Example

In this example, we'll apply the background-origin property to an element with a background image and see how it affects the image positioning with different values.

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-origin Example</title>
  <style>
    .box {
      width: 200px;
      height: 200px;
      border: 20px solid #333;
      padding: 20px;
      background-image: url('https://via.placeholder.com/200');
      background-origin: border-box; /* Try padding-box or content-box */
      background-repeat: no-repeat;
      background-size: cover;
    }
  </style>
</head>
<body>
  <h1>Background Origin Example</h1>
  <div class="box"></div>
</body>
</html>

🖥️ Browser Compatibility

The background-origin property is well-supported across all modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. It's a reliable property for controlling the positioning of background images within an element.

🎉 Conclusion

The background-origin property provides developers with fine-grained control over the positioning of background images.

Whether you want your background image to be aligned with the border, padding, or content of an element, this property gives you the flexibility to achieve your desired layout. Experimenting with the different values of background-origin can help you better understand how it influences the appearance of your background images.