Backgrounds
Background Origin
Utilities for controlling how an element's background is positioned relative to borders, padding, and content.
Quick reference
| Class | Description |
|---|---|
bg-origin-border | background-origin: border-box |
bg-origin-padding | background-origin: padding-box |
bg-origin-content | background-origin: content-box |
Basic usage
Setting the background origin
Use bg-origin-border, bg-origin-padding and bg-origin-content to control where an element’s background is rendered.
bg-origin-border
Visual example of
bg-origin-borderbg-origin-padding
Visual example of
bg-origin-paddingbg-origin-content
Visual example of
bg-origin-contenthtml
<div class="bg-origin-border ... "></div>
<div class="bg-origin-padding ... "></div>
<div class="bg-origin-content ... "></div>