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; |
Utiliza 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>Antepone a la utilidad background-origin el prefijo de una variante de punto de ruptura como md: para aplicar la utilidad únicamente en tamaños de pantalla mediano y superiores:
<div class="bg-origin-border md:bg-origin-padding ..."> <!-- ... --></div>Obtén más información sobre el uso de variantes en la documentación de variantes.