Background

Background Origin

Utilities for controlling how an element's background is positioned relative to borders, padding, and content.

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

bg-origin-padding

bg-origin-content

<div className="**bg-origin-border** p-4 border-4 border-dashed ..." style="background-image: url(...)"></div>
<div className="**bg-origin-padding** p-4 border-4 border-dashed ..." style="background-image: url(...)"></div>
<div className="**bg-origin-content** p-4 border-4 border-dashed ..." style="background-image: url(...)"></div>