background-origin
Sets the origin point for background image positioning. Used with background-clip for fine background area control.
Class List
| Class | CSS | Description |
|---|---|---|
bgopb | background-origin: padding-box | Background starts from padding area (default) |
bgobb | background-origin: border-box | Background starts from border area |
bgocb | background-origin: content-box | Background starts from content area |
Visual Diagram
A diagram of where the top-left corner of the background image lands. The outer grey band is the border, the next ring is the padding, the innermost box is the content area, and the green dot marks where the image starts.
bgobb
content
Starts at the outer edge of the border, so the image shifts up and left by the border width.
bgopb
content
Starts at the inner edge of the border. This is what you get when you set nothing.
bgocb
content
Skips the padding and starts at the content corner, pulling the image inward by the padding.
Usage Examples
<!-- Background starts from border area -->
<div class="bgobb bgrn bsc b16pxdashed27272A p2rem h20rem">
Background is visible under the border
</div>
<!-- Background starts from content area only -->
<div class="bgocb bgrn bsc p2rem b8pxsolid27272A h20rem">
No background in the padding area
</div>
<!-- Used with clip -->
<div class="bgobb bgcpb bgrn bsc p2rem b8pxdashed27272A h20rem">
Origin from border, clip to padding
</div>Class Details
bgopbbackground-origin: padding-box
The default. The background image takes the inner edge of the border as its origin. Most background placement is calculated with this assumption, so it is also handy as a reset class when you need to undo another value.
<!-- Default origin: restore it after overriding elsewhere -->
<div class="bgopb bgrn bsc b8pxsolid27272A p2rem h20rem">
The image starts at the inner edge of the border.
</div>bgobbbackground-origin: border-box
Moves the origin to the outer edge of the border. Use it for framed backgrounds where the image should continue under a thick border. To actually see the area under the border, keep the clip at the border box too.
<!-- Photo continues under a thick frame -->
<div class="bgobb bgcbb bgrn bsc b16pxdashed27272A p2rem h20rem br8px">
<p class="fs16px fw700 cFFFFFF">Framed hero</p>
</div>bgocbbackground-origin: content-box
Moves the origin to the content corner. Use it when the padding should stay an unpainted frame, or to keep an icon background from bleeding into the padding.
<!-- Padding kept as an unpainted gutter around an icon tile -->
<div class="bgocb bgrn bsct bgpc p2rem w8rem h8rem bg18181B br8px">
<span class="fs12px cA1A1AA">Icon tile</span>
</div>Practical Example — Framed Banner
A banner pattern with a thick border acting as a frame and the photo continuing inside it. Origin is the border box while clipping stays at the padding box, so the frame survives and only the image placement extends.
<article class="bgobb bgcpb bgrn bsc bgpc
b16pxdashed27272A p2rem h30rem br8px df fdc jcfe">
<span class="fs12px ttu ls0-05em cA1A1AA mb8px">Release notes</span>
<h3 class="fs2-4rem fw700 cFFFFFF lh1-3 mb8px">Atomic CSS 2.0</h3>
<p class="fs14px cA1A1AA">The artwork runs under the frame because the origin is
the border box, while the clip keeps the dashed frame itself unpainted.</p>
</article>Tips / Caveats
No effect with a plain background color
background-origin only affects the coordinate system of background images. On an element with just a background color, every value renders identically. Use background-clip if you want to cut regions away.
Ignored with fixed attachment
When background-attachment is fixed the image is positioned against the viewport instead of the element, so background-origin has no effect at all. Do not expect a fixed background and a custom origin at the same time.
Two values collapse without a border
With a zero-width border the border box and the padding box are the same rectangle, so the two classes produce identical output. You need a real border and real padding for the difference to exist.
Percentage sizes are measured against the origin box
When background-size is a percentage, the rectangle it resolves against is the box chosen by origin. Changing the origin can therefore change the scale of the image, not just its starting point.
Difference between clip and origin
background-origin sets where background starts; background-clip sets visible area. Usually combined.