background-size

Ejemplos

Llenando el contenedor

Usa 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>

Llenando sin recortar

Usa la utilidad bg-contain para escalar la imagen de fondo hasta los bordes exteriores sin recortarla ni estirarla:

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

Usando el tamaño predeterminado

Usa la utilidad bg-auto para mostrar la imagen de fondo en su tamaño predeterminado:

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

Usando un valor personalizado

Usa la sintaxis bg-size-[<value>] para establecer el background size basado 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 agrega la función var() por ti automáticamente.

Diseño Responsive

Prefija una utilidad background-size con una variante de breakpoint como md: para aplicar la utilidad solo en tamaños de pantalla medium y superiores:

<div class="bg-auto md:bg-contain ...">
  <!-- ... -->
</div>

Aprende más sobre el uso de variantes en la documentación de variantes.