📌 Introduction

The background-origin property controls **the reference box** from which the background image is positioned. It determines whether the background starts at the border edge, padding edge, or content edge. This property helps improve accuracy when aligning background images inside components. 🎨✨

🎯 What Does background-origin Do?

✨ Syntax

selector {
  background-origin: border-box | padding-box | content-box;
}

🧩 Available Values

1. border-box

The background image is positioned relative to the **outer edge** of the border.

background-origin: border-box;

2. padding-box (default)

The background starts at the **inner edge of the border**, matching padding.

background-origin: padding-box;

3. content-box

Content area becomes the origin — background starts inside padding.

background-origin: content-box;

🧩 How It Interacts with background-clip

background-origin sets where the image is placed.background-clip sets how far the image is allowed to paint.

background-origin: content-box;
background-clip: padding-box;

🔥 Practical Examples

1. Image Positioned From Border

.box {
  border: 10px solid #000;
  background-image: url("pattern.png");
  background-origin: border-box;
  background-position: top right;
}

2. Default Padding-Origin Background

.card {
  padding: 20px;
  background-image: url("texture.png");
  background-origin: padding-box; /* default */
}

3. Content-Based Background Positioning

.content {
  padding: 30px;
  background-image: url("shape.png");
  background-origin: content-box;
  background-position: 0 0;
}

4. Sprite Precise Alignment Using content-box

.icon {
  background-image: url("sprite.png");
  background-origin: content-box;
  background-size: auto;
  background-position: -40px -80px;
}

5. Using Multiple Background Layers

.multi {
  background-image: url("pattern.png"), url("shape.png");
  background-origin: padding-box, border-box;
}

📊 Summary Table

🖼️ Visual Illustration

🎉 Conclusion

The background-origin property provides precise control over how background images are positioned within an element’s box model. Whether you want alignment relative to borders, padding, or content, this property ensures your designs stay consistent and pixel-perfect. Master it alongside background-clip and background-position to elevate your background designs. 🚀