background-size

Ejemplos

Rellenar el contenedor

Utiliza la utilidad bg-cover para escalar la imagen de fondo hasta que llene la capa de fondo, recortando la imagen si es necesario:

<div class="bg-[url(/img/mountains.jpg)] bg-cover bg-center"></div>

Rellenar sin recortar

Utiliza la utilidad bg-contain para escalar la imagen de fondo a los bordes exteriores sin recortar ni estirar:

<div class="bg-[url(/img/mountains.jpg)] bg-contain bg-center"></div>

Usar el tamaño por defecto

Utiliza la utilidad bg-auto para mostrar la imagen de fondo a su tamaño por defecto:

<div class="bg-[url(/img/mountains.jpg)] bg-auto bg-center bg-no-repeat"></div>

Usar un valor personalizado

Usa la sintaxis bg-size-[<value>] para establecer el/la tamaño de fondo basándose en un valor completamente personalizado:

<div class="bg-size-[auto_100px] ...">  <!-- ... --></div>

Para variables CSS, también puedes usar la sintaxis bg-size-(<custom-property>) :

<div class="bg-size-(--my-image-size) ...">  <!-- ... --></div>

Esto es solo un atajo para bg-size-[var(<custom-property>)] que añade la función var() por ti automáticamente.

Diseño responsivo

Antepone a la utilidad background-size 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-auto md:bg-contain ...">  <!-- ... --></div>

Obtén más información sobre el uso de variantes en la documentación de variantes.