background-origin
Choosing the positioning area for a background image.
Overview
| Class | Declarations |
|---|---|
bg-origin-border | background-origin: border-box;
|
bg-origin-content | background-origin: content-box;
|
bg-origin-padding | background-origin: padding-box;
|
background-origin:<origin> | background-origin: <origin>;
|
Examples
Choose the background positioning area
Compare the same 80 × 50 image at the top-left of three positioning areas. The 8px border and 24px padding make each origin visible.
<!-- Border origin · x 0, y 0 --><div id="target" role="img" aria-label="Geometric landscape" class="h:176px w:280px max-w:100% p-lg b:8px|dashed|color-mix(in|oklab,var(--color-violet-50)|50%,transparent) bg-clip-border bg-no-repeat bg-origin-border background-position:0|0 background-size:80px|50px background-image:url(/demo/landscape.svg)"></div><!-- Padding origin · x 8, y 8 --><div id="target" role="img" aria-label="Geometric landscape" class="h:176px w:280px max-w:100% p-lg b:8px|dashed|color-mix(in|oklab,var(--color-violet-50)|50%,transparent) bg-clip-border bg-no-repeat bg-origin-padding background-position:0|0 background-size:80px|50px background-image:url(/demo/landscape.svg)"></div><!-- Content origin · x 32, y 32 --><div id="target" role="img" aria-label="Geometric landscape" class="h:176px w:280px max-w:100% p-lg b:8px|dashed|color-mix(in|oklab,var(--color-violet-50)|50%,transparent) bg-clip-border bg-no-repeat bg-origin-content background-position:0|0 background-size:80px|50px background-image:url(/demo/landscape.svg)"></div>Generated CSS
@layer utilities { .bg-origin-border { background-origin: border-box } .bg-origin-content { background-origin: content-box } .bg-origin-padding { background-origin: padding-box }}Offsets above are relative to the outer border edge. The dashed border may paint over the image. The clipping area stays border-box in all three specimens.
Align art with borders or content
Percentage image sizes also use the chosen positioning area. With background-size:100%|100%, the image fills either the border box or the content box; it may be distorted because both dimensions are forced.
<!-- Fill the border positioning area --><div id="target" role="img" aria-label="Geometric landscape" class="h:176px w:280px max-w:100% p-lg b:8px|dashed|color-mix(in|oklab,var(--color-violet-50)|50%,transparent) bg-clip-border bg-no-repeat bg-origin-border background-position:0|0 background-size:100%|100% background-image:url(/demo/landscape.svg)"></div><!-- Fill the content positioning area --><div id="target" role="img" aria-label="Geometric landscape" class="h:176px w:280px max-w:100% p-lg b:8px|dashed|color-mix(in|oklab,var(--color-violet-50)|50%,transparent) bg-clip-border bg-no-repeat bg-origin-content background-position:0|0 background-size:100%|100% background-image:url(/demo/landscape.svg)"></div>Origin changes positioning and sizing, not clipping. Keep background-clip separate. For background-attachment:fixed, the viewport supplies the positioning area instead.
Apply conditionally
Widen the preview to sm to move the same image from the padding origin to the content origin. Print returns to padding-box positioning.
<!-- Padding → content at sm --><div id="target" role="img" aria-label="Geometric landscape" class="h:176px w:280px max-w:100% p-lg b:8px|dashed|color-mix(in|oklab,var(--color-violet-50)|50%,transparent) bg-clip-border bg-no-repeat bg-origin-padding background-position:0|0 background-size:80px|50px background-image:url(/demo/landscape.svg) bg-origin-padding@print bg-origin-content@screen@sm"></div>The border, padding, image size and clipping remain unchanged, making the origin shift visible.