The background-origin property

The background-origin property specifies how a background image (namely the image, not the fill) will be placed relative to an element: part of the background image will be under a border, the background will not be under the border, or the background will be placed only under an element content (that is, padding will move the background).

Syntax

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

Values

Value	Description
`border-box`	A background image will be under a border.
`padding-box`	A background image will not be under a border.
`content-box`	A background image will only be under a content.

Default value: padding-box.

Remarks

The background-origin property does not work when background-attachment is set to fixed. Also, background-origin property with background-repeat in the repeat value always works as with border-box.

Example . By default

By default, the background will not go under a border:

<div id="elem"></div>

#elem {
	background-image: url("bg.png");
	background-repeat: no-repeat;
	border: 10px dashed black;
	padding: 30px;
	width: 250px;
	height: 150px;
}

Example . The border-box value

Now the background will go under the border:

<div id="elem"></div>

#elem {
	background-origin: border-box;
	background-image: url("bg.png");
	border: 10px dashed black;
	padding: 30px;
	width: 250px;
	height: 150px;
}

Example . The content-box value

And now the background will move with padding:

<div id="elem"></div>

#elem {
	background-origin: content-box;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	border: 10px dashed black;
	padding: 30px;
	width: 250px;
	height: 150px;
}

Example . With background-repeat: repeat

When background-repeat is set to repeat, the background-origin property always works as with the border-box value, that is, the background always goes under a border:

<div id="elem"></div>

#elem {
	background-repeat: repeat;
	background-image: url("bg.png");
	border: 10px dashed black;
	padding: 30px;
	width: 350px;
	height: 300px;
}

The background-origin property

Syntax

Values

Remarks

Example . By default

Example . The border-box value

Example . The content-box value

Example . With background-repeat: repeat

See also