CSS background-origin Property – Specifies the Background Positioning Area

Definition and Usage

The background-origin property specifies which area of an element's box is used as the origin for positioning a background image.

You can choose one of three options—padding-box, border-box, or content-box—to define the reference area for background image positioning.

The terminology for the possible values of the background-origin property is described below:

border-box: Refers to the area that extends to the outer edge of the border.
padding-box: Refers to the area that extends to the outer edge of the padding.
content-box: Refers to the region where the actual content of the element resides, such as text, images, or videos. This is the inner area up to the content edge, and if the element has padding, it lies inside the padding region.

Basic Example

Demo CSS

div {
    aspect-ratio: 1.5;
    border: 10px dashed yellowgreen; /* The area up to the outer edge of the border 
                                        corresponds to border-box */
    padding: 30px; /* The area up to the outer edge of the padding corresponds to padding-box
                      The inner area inside the padding corresponds to content-box */
    background: #f2f2f2 url("earth.jpg") no-repeat;
    background-origin: padding-box; /* initial value */
}
div span { /* content-box styling */
    color: white;
    background-color: blue;
    display: block;
}

Note:
The background of an element (color or image) is always painted behind the border.

Code Explanation
The aspect-ratio property sets an element's width-to-height ratio.
In the demo CSS, aspect-ratio: 1.5; means the width is 1.5 times the height.

Formal syntax

Values

Accepted values for the background-origin property
`border-box`	Specifies the `border-box` of the element as the reference area for background positioning.
`padding-box`	Initial value. Specifies the `padding-box` of the element as the reference area for background positioning.
`content-box`	Specifies the `content-box` of the element as the reference area for background positioning.

These values can be observed through the element's box model.

The CSS box model is a fundamental concept that defines the structure and layout of elements on a web page. Each HTML element consists of content, padding, border, and margin. These components form a box around the element, which is referred to as the "box model."

Note:
The background-origin property is ignored when background-attachment is set to fixed.

Syntax

CSS

/* Keyword values */
background-origin: border-box;
background-origin: padding-box;
background-origin: content-box;

/* Global values */
background-origin: inherit;
background-origin: initial;
background-origin: revert;
background-origin: revert-layer;
background-origin: unset;

Formal definition

Formal definition of the background-origin property
Initial value	`padding-box`
Applies to	all elements.
Inherited	no

Example – Using Two Gradients

In this example, the .box has a thick dashed border.
The first gradient uses padding-box as the background origin, so it is positioned inside the border. The second gradient uses content-box, so it appears only within the content area.

In CSS, gradients are implemented using the background-image property. Therefore, the background-origin property can be applied.

CSS

.box {
    color: #fff;
    background-image: linear-gradient(
                        to right,
                        rgba(255, 0, 0, 0.5),
                        rgba(0, 0, 255, 0.5),
                        rgba(0, 128, 0, 0.5)
                      ),
                      radial-gradient(circle, gold, silver);
    border: 15px dashed yellowgreen;
    padding: 15px;
    background-origin: padding-box, content-box;
    background-repeat: no-repeat;
}

Browser compatibility

Browser compatibility for the background-origin property
Property	Desktop Chrome	DesktopDesktop Edge	Desktop Firefox	Safari
`background-origin`	1	12	4	3

Specifications

Specification for the background-origin property
Specification
`background-origin`	CSS Backgrounds and Borders Module Level 3 #the-background-origin