La Propiedad BACKGROUND-REPEAT

Controla cómo se repiten las imágenes de fondo de un elemento. Por defecto, una imagen de fondo se repite tanto horizontal como verticalmente para cubrir todo el elemento.

La propiedad background-repeat en CSS controla cómo se repiten las imágenes de fondo de un elemento. Por defecto, una imagen de fondo se repite tanto horizontal como verticalmente para cubrir todo el elemento. Sin embargo, background-repeat te permite modificar este comportamiento.

Sintaxis Básica

La sintaxis básica para usar la propiedad background-repeat es la siguiente:

CSS
 
selector {
  background-image: url('tu-imagen.png'); /* Necesitas una imagen de fondo para ver el efecto */
  background-repeat: valor;
}

Donde selector es el elemento HTML al que quieres aplicar la repetición de fondo y valor puede ser uno de los siguientes:

Valores de la Propiedad background-repeat

La propiedad background-repeat puede tomar los siguientes valores:

1. repeat

Este es el valor predeterminado. La imagen de fondo se repite tanto horizontal como verticalmente hasta cubrir todo el área del elemento.

Ejemplo:

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .elemento {
    width: 300px;
    height: 200px;
    border: 1px solid black;
    background-image: url('https://via.placeholder.com/50/00FF00'); /* Una pequeña imagen verde */
    background-repeat: repeat;
  }
</style>
</head>
<body>

  <div class="elemento">Este div tiene una imagen de fondo que se repite en ambas direcciones.</div>

</body>
</html>

En este ejemplo, la pequeña imagen verde se repetirá horizontal y verticalmente para llenar el div de 300x200 píxeles.

2. no-repeat

La imagen de fondo no se repite en absoluto. Se mostrará solo una vez en su posición inicial (que por defecto es la esquina superior izquierda).

Ejemplo:

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .elemento {
    width: 300px;
    height: 200px;
    border: 1px solid black;
    background-image: url('https://via.placeholder.com/100/FF0000'); /* Una imagen roja */
    background-repeat: no-repeat;
    background-position: center; /* Centramos la imagen para verla mejor */
  }
</style>
</head>
<body>

  <div class="elemento">Este div tiene una imagen de fondo que no se repite y está centrada.</div>

</body>
</html>

Aquí, la imagen roja de 100x100 píxeles se mostrará solo una vez en el centro del div.

3. repeat-x

La imagen de fondo se repite solo horizontalmente.

Ejemplo:

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .elemento {
    width: 300px;
    height: 200px;
    border: 1px solid black;
    background-image: url('https://via.placeholder.com/50/0000FF'); /* Una pequeña imagen azul */
    background-repeat: repeat-x;
  }
</style>
</head>
<body>

  <div class="elemento">Este div tiene una imagen de fondo que se repite solo horizontalmente.</div>

</body>
</html>

La pequeña imagen azul se repetirá a lo largo del ancho del div, pero no verticalmente.

4. repeat-y

La imagen de fondo se repite solo verticalmente.

Ejemplo:

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .elemento {
    width: 300px;
    height: 200px;
    border: 1px solid black;
    background-image: url('https://via.placeholder.com/50/FFFF00'); /* Una pequeña imagen amarilla */
    background-repeat: repeat-y;
  }
</style>
</head>
<body>

  <div class="elemento">Este div tiene una imagen de fondo que se repite solo verticalmente.</div>

</body>
</html>

La pequeña imagen amarilla se repetirá a lo largo de la altura del div, pero no horizontalmente.

5. space

La imagen de fondo se repite tanto como sea posible sin recortar. Si no hay suficiente espacio para mostrar un número entero de repeticiones en una dirección, el espacio restante se distribuye equitativamente entre las imágenes.

Ejemplo:

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .elemento {
    width: 300px;
    height: 150px;
    border: 1px solid black;
    background-image: url('https://via.placeholder.com/80/FFA500'); /* Una imagen naranja */
    background-repeat: space;
  }
</style>
</head>
<body>

  <div class="elemento">Este div tiene una imagen de fondo con background-repeat: space.</div>

</body>
</html>

Observarás que la imagen naranja se repite horizontalmente, y si el ancho no es un múltiplo exacto del ancho de la imagen, se añade espacio entre las repeticiones.

6. round

La imagen de fondo se repite tanto como sea posible. Si no hay suficiente espacio para mostrar un número entero de repeticiones, la imagen se escala para que las repeticiones encajen perfectamente sin espacios.

Ejemplo:

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .elemento {
    width: 300px;
    height: 150px;
    border: 1px solid black;
    background-image: url('https://via.placeholder.com/80/800080'); /* Una imagen morada */
    background-repeat: round;
  }
</style>
</head>
<body>

  <div class="elemento">Este div tiene una imagen de fondo con background-repeat: round.</div>

</body>
</html>

Aquí, la imagen morada se repetirá horizontalmente, y si el ancho no es un múltiplo exacto del ancho de la imagen, se escalará ligeramente para que quepan repeticiones completas.

Uso de Dos Valores

Puedes especificar valores diferentes para la repetición horizontal y vertical utilizando dos valores para la propiedad background-repeat. El primer valor se aplica a la repetición horizontal (eje X), y el segundo valor se aplica a la repetición vertical (eje Y).

Ejemplo:

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .elemento {
    width: 300px;
    height: 200px;
    border: 1px solid black;
    background-image: url('https://via.placeholder.com/50/00FFFF'); /* Una imagen cian */
    background-repeat: repeat-x no-repeat; /* Repetir horizontalmente, no repetir verticalmente */
    background-position: center top; /* Posicionar la imagen no repetida en la parte superior central */
  }

  .elemento2 {
    width: 300px;
    height: 200px;
    border: 1px solid black;
    background-image: url('https://via.placeholder.com/50/FFA07A'); /* Una imagen salmón */
    background-repeat: no-repeat repeat-y; /* No repetir horizontalmente, repetir verticalmente */
    background-position: left center; /* Posicionar la imagen no repetida en el centro izquierdo */
  }
</style>
</head>
<body>

  <div class="elemento">Este div repite la imagen horizontalmente pero no verticalmente.</div>
  <div class="elemento2">Este div no repite la imagen horizontalmente pero sí verticalmente.</div>

</body>
</html>

Casos de Uso Comunes

  • Patrones de fondo: Utilizar imágenes pequeñas que se repiten para crear patrones visuales.
  • Fondos sin repetición: Mostrar una única imagen de fondo, como una fotografía o un logotipo.
  • Rayas horizontales o verticales: Usar repeat-x o repeat-y con imágenes delgadas para crear líneas o barras.
  • Efectos de espaciado y escalado: Experimentar con space y round para lograr efectos de mosaico más dinámicos.

Interacción con Otras Propiedades de Fondo

  • background-position: Cuando una imagen no se repite (no-repeat), background-position determina dónde se coloca la imagen única. Si la imagen se repite, background-position establece el punto de inicio para la repetición.
  • background-size: El tamaño de la imagen original afectará cómo se repite. Si la imagen se redimensiona con background-size, la repetición se basará en el nuevo tamaño.
  • background-origin y background-clip: Estas propiedades definen el área dentro de la cual se aplica la repetición del fondo.

Consideraciones

  • Elige el valor de background-repeat que mejor se adapte al efecto visual que deseas lograr.
  • Para patrones sin costuras, asegúrate de que tu imagen esté diseñada para repetirse de forma continua.
  • Considera el tamaño de tu imagen de fondo. Las imágenes grandes que se repiten pueden afectar el rendimiento de la página.

Conclusión

La propiedad background-repeat es fundamental para controlar la apariencia de las imágenes de fondo en tus elementos CSS. Al comprender los diferentes valores y cómo utilizarlos, puedes crear una amplia variedad de efectos visuales, desde patrones simples hasta diseños de fondo más complejos. ¡Experimenta con esta propiedad para darle un toque único a tus páginas web!