CSS

CSS

🎯 What is background-origin?

The background-origin property defines the positioning area of a background image.

In simpler terms, it determines whether the background image starts from:

  • the content area
  • the padding area
  • or the border area

🧩 Simple Definition

CSS
background-origin = defines where a background image begins

🧩 Basic Syntax

CSS
background-origin: value;

βš™οΈ Accepted Values

Value Description
padding-box Background starts inside the padding area
border-box Background starts from the border area
content-box Background starts only inside the content area
initial Resets to default value
inherit Inherits value from parent element

🧠 Default Value

CSS
background-origin: padding-box;

πŸ‘‰ This is the default behavior.

The background image starts from the padding area.

🧩 Understanding the CSS Box Model

An HTML element is made up of three main areas:

  • 1. content-box β†’ contains the actual content
  • 2. padding-box β†’ space around the content
  • 3. border-box β†’ outer border area

The background-origin property determines which of these areas the background image uses as its starting point.

🧩 Visual Representation

CSS

+-------------------------------+  ← border-box
|         Padding Area          |
|   +-----------------------+   |
|   |     Content Area      |   |  ← content-box
|   +-----------------------+   |
+-------------------------------+

πŸ”Ή padding-box

CSS
background-origin: padding-box;

πŸ‘‰ The background image starts inside the padding area.

The image does NOT extend beneath the border.

🧩 Example

CSS

div {

  background-image: url("bg.jpg");

  background-origin: padding-box;

}

πŸ”Ή border-box

CSS
background-origin: border-box;

πŸ‘‰ The background image starts from the outer border edge.

This means the border becomes part of the background area.

🧩 Example

CSS

div {

  background-image: url("bg.jpg");

  background-origin: border-box;

}

πŸ”Ή content-box

CSS
background-origin: content-box;

πŸ‘‰ The background image appears only inside the content area.

It does not extend into the padding area.

🧩 Example

CSS

div {

  background-image: url("bg.jpg");

  background-origin: content-box;

}

βš–οΈ Difference Between Values

Value Starting Area Behavior
padding-box Padding area Default behavior
border-box Border area Includes border in background
content-box Content area only Most restricted area

🧩 Practical Example

CSS

.box {

  border: 10px solid black;

  padding: 20px;

  background-image: url("pattern.png");

  background-origin: border-box;

}

🧠 Explanation

border-box

The background image extends beneath the border area.

padding

Creates inner spacing around the content.

border

Defines the outer edge of the element.

🎨 Common Usage

background-origin is commonly used together with:

Property Purpose
background-image Defines the image
background-size Controls image size
background-position Controls image placement
background-clip Defines where the background is visible

⚠️ Important Note

The background-origin property only affects the starting area of the background image.

It does NOT control:

  • image size
  • clipping area
  • repetition

Those behaviors are controlled by other background properties.

CSS Background Attachment
CSS Background Clip