Background
background-origin
background-origin sets the area (outside the border, inside the border, or the content) that background images are placed in.
Syntax
<visual-box>#
<visual-box> = content-box | padding-box | border-boxPreview
Code
.box {
background-image: url(/sample.svg);
background-repeat: no-repeat;
border: 16px dashed rgb(31 41 55 / 0.3);
padding-block: 16px;
padding-inline: 16px;
background-origin: border-box;
}Controls
About
Values
padding-box(the initial value): relative to the inside of the border. The image starts at the corner just inside the border.border-box: relative to the outside of the border. The image starts at the corner under the border.content-box: relative to the content area, without the padding.
The preview on this page uses helper declarations to lay a single, non-repeating sample image and give the box a 16px translucent dashed border and 16px of padding. background-position keeps its initial top left, so the image sits in the top-left corner of the chosen area.
It moves the reference for position and size
background-origin sets the area that background-position places the image in and that percentages in background-size are measured against. Repeated images also start tiling from this area. How far the background is painted is up to background-clip, so with border-box here and a background-clip of padding-box, the part under the border is cut off.
It has no effect on background-attachment: fixed backgrounds (the whole viewport is used instead). The background color has no position, so background-origin doesn't affect it.
In the background shorthand
When the background shorthand has a single box keyword, it sets both background-origin and background-clip to it. With two, the first is background-origin and the second is background-clip.