background-origin

Setting the background's origin.

Overview

Examples

Choose the background positioning area

Use bg-origin-padding, bg-origin-border, or bg-origin-content to decide which box positions the background image.

<section class="bg-origin-content p:md b:1px|solid|gray-20">    ...</section>

@layer utilities {    .bg-origin-content {        background-origin: content-box    }}

Align art with borders or content

Use bg-origin-border when the background should start from the border box, and bg-origin-content when it should align with the content box.

<div class="bg-origin-border">...</div><div class="bg-origin-content">...</div>

This affects positioning and sizing, not clipping. Use background-clip to control where the background is painted.

Apply conditionally

Apply styles based on different states using selectors and conditional queries.

<div class="bg-origin-padding bg-origin-content@sm bg-origin-padding@print">...</div>