Fondos
Utilidades para controlar cómo se posiciona el fondo de un elemento en relación con los bordes, el padding y el contenido.
| Clase | Estilos |
|---|---|
bg-origin-border | background-origin: border-box; |
bg-origin-padding | background-origin: padding-box; |
bg-origin-content | background-origin: content-box; |
Usa las utilidades bg-origin-border, bg-origin-padding y bg-origin-content para controlar dónde se renderiza el fondo de un elemento:
bg-origin-border
bg-origin-padding
bg-origin-content
<div class="border-4 bg-[url(/img/mountains.jpg)] bg-origin-border p-3 ..."></div><div class="border-4 bg-[url(/img/mountains.jpg)] bg-origin-padding p-3 ..."></div><div class="border-4 bg-[url(/img/mountains.jpg)] bg-origin-content p-3 ..."></div>Prefija una utilidad background-origin con una variante de breakpoint como md: para aplicar la utilidad solo en tamaños de pantalla medium y superiores:
<div class="bg-origin-border md:bg-origin-padding ..."> <!-- ... --></div>Aprende más sobre el uso de variantes en la documentación de variantes.