background-repeat

Ejemplos

Ejemplo básico

Usa la utilidad bg-repeat para repetir la imagen de fondo tanto vertical como horizontalmente:

<div class="bg-[url(/img/clouds.svg)] bg-center bg-repeat ..."></div>

Repitiendo horizontalmente

Usa la utilidad bg-repeat-x para repetir la imagen de fondo solo horizontalmente:

<div class="bg-[url(/img/clouds.svg)] bg-center bg-repeat-x ..."></div>

Repitiendo verticalmente

Usa la utilidad bg-repeat-y para repetir la imagen de fondo solo verticalmente:

<div class="bg-[url(/img/clouds.svg)] bg-center bg-repeat-y ..."></div>

Previniendo el recorte

Usa la utilidad bg-repeat-space para repetir la imagen de fondo sin recortarla:

<div class="bg-[url(/img/clouds.svg)] bg-center bg-repeat-space ..."></div>

Previniendo el recorte y los espacios

Usa la utilidad bg-repeat-round para repetir la imagen de fondo sin recortarla, estirándola si es necesario para evitar espacios:

<div class="bg-[url(/img/clouds.svg)] bg-center bg-repeat-round ..."></div>

Deshabilitando la repetición

Usa la utilidad bg-no-repeat para evitar que una imagen de fondo se repita:

<div class="bg-[url(/img/clouds.svg)] bg-center bg-no-repeat ..."></div>

Diseño Responsive

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

<div class="bg-repeat md:bg-repeat-x ...">
  <!-- ... -->
</div>

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