background-origin

The background-origin property defines the positioning area of the background image (the point from which the background will start).

Initial Value padding-box
Applies to All elements, including ::first-letter and ::first-line
Inheritance no
Animation discrete

The background-origin property defines how the background image is positioned relative to the frame, indentation, and content of the element. The size of background images can be changed by the background-size property.

If the background-attachment value is “fixed”, then the background-origin will have no effect.

What is the difference between the origin and clip properties?

The difference is that the background-clip property, unlike background-origin, cuts off the part of the background that falls outside of the specified boundaries. The background-origin property only defines how the background image is positioned.

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;

Description

valuewhat it does
padding boxDefault value. The background image starts in the top left corner at the edge of the padding.
border-boxIf a border is specified, it will be drawn behind the image, and if there is a transparent part in the border (outer frame), only that part will be displayed.
content-boxThe background image is positioned relative to the display area of ​​the content. If padding is specified, move inward by that amount.
inheritThe value is inherited from the parent element.
initialSets the default value.

Example

background-origin

border-box
padding-box
content-box
&repeat
#bb1 {
	background-origin: border-box;
}
#pb1 {
	background-origin: padding-box;
}
#cb1 {
	background-origin: content-box;
}
#bor {
	background-origin: content-box;
	background-repeat: repeat;
}

.sample_box {
	margin: 1rem auto 0 auto;
	padding: 2rem;
	border: 5px dashed #444;
	background: url(https://stackdiary.com/140x100.png) no-repeat;
}