The background-origin CSS property sets the background's origin: from the border start, inside the border, or inside the padding.

/* 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: unset; 

background-origin

The background-origin CSS property sets the background's origin: from the border start, inside the border, or inside the padding.

Note that background-origin is ignored when background-attachment is fixed.

Syntax

/* 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: unset; 

The background-origin property is specified as one of the keyword values listed below.

Values

border-box

The background is positioned relative to the border box.

padding-box

The background is positioned relative to the padding box.

content-box

The background is positioned relative to the content box.

Formal definition

Initial value	padding-box
Applies to	all elements. It also applies to ::first-letter and ::first-line.
Inherited	no
Computed value	as specified
Animation type	discrete

Formal syntax

<box>#
where <box> = border-box | padding-box | content-box

Examples

Setting background origins

.example {   border: 10px double;   padding: 10px;   background: url('image.jpg');   background-position: center left;   background-origin: content-box; } 

#example2 {   border: 4px solid black;   padding: 10px;   background: url('image.gif');   background-repeat: no-repeat;   background-origin: border-box; } 

div {   background-image: url('logo.jpg'), url('mainback.png'); /* Applies two images to the background */   background-position: top right, 0px 0px;   background-origin: content-box, padding-box; } 

Using two gradients

In this example the box has a thick dotted border. The first gradient uses the padding-box as the background-origin and therefore the background sits inside the border. The second uses the content-box and so only displays behind the content.

.box {   margin: 10px 0;   color: #fff;   background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,0.6) 60%, rgba(252,176,69,1) 100%),   radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(0,0,0,1) 28%);   border: 20px dashed black;   padding: 20px;   width: 400px;   background-origin: padding-box, content-box;   background-repeat: no-repeat; } 

<div class="box">Hello!</div> 

Specifications

Specification
CSS Backgrounds and Borders Module Level 4 # the-background-origin

See also

background-clip

Last modified: Aug 12, 2021, by MDN contributors

Select your preferred language English (US)DeutschEspañolFrançais日本語한국어PolskiPortuguês (do Brasil)Русский中文 (简体) Change language