background-repeat

Ejemplos

Ejemplo básico

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

Repetir horizontalmente

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

Repetir verticalmente

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

Evitar el recorte

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

Evitar el recorte y los espacios

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

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

Desactivar la repetición

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

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

Diseño responsivo

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

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