Repetición de fondo

3.1 Propiedad background-repeat

Las propiedades background-repeat y background-size en CSS se utilizan para controlar cómo las imágenes de fondo se repiten y escalan dentro de los elementos. Estas propiedades proporcionan a los desarrolladores web herramientas flexibles para crear fondos visualmente atractivos. Vamos a ver cada una de ellas en detalle.

La propiedad background-repeat determina cómo se repiten las imágenes de fondo en un elemento. Por defecto, la imagen de fondo se repite tanto horizontal como verticalmente.

Valores

• repeat: la imagen se repite horizontal y verticalmente (por defecto)
• repeat-x: la imagen se repite solo horizontalmente
• repeat-y: la imagen se repite solo verticalmente
• no-repeat: la imagen no se repite

1. Valor repeat:

Repite la imagen horizontal y verticalmente.

    
      .repeat {
        width: 200px;
        height: 200px;
        background-image: url('https://via.placeholder.com/50');
        background-repeat: repeat;
        border: 1px solid #000;
      }
    
  

    
      <div class="repeat">Repetición horizontal y vertical</div>
    
  

2. Valor repeat-x:

Repite la imagen horizontalmente.

    
      .repeat-x {
        width: 200px;
        height: 200px;
        background-image: url('https://via.placeholder.com/50');
        background-repeat: repeat-x;
        border: 1px solid #000;
      }
    
  

    
      <div class="repeat-x">Repetición solo horizontal</div>
    
  

3. Valor repeat-y:

Repite la imagen verticalmente.

    
      .repeat-y {
        width: 200px;
        height: 200px;
        background-image: url('https://via.placeholder.com/50');
        background-repeat: repeat-y;
        border: 1px solid #000;
      }
    
  

    
      <div class="repeat-y">Repetición solo vertical</div>
    
  

4. Valor no-repeat:

La imagen no se repite.

    
      .no-repeat {
        width: 200px;
        height: 200px;
        background-image: url('https://via.placeholder.com/50');
        background-repeat: no-repeat;
        border: 1px solid #000;
      }
    
  

    
      <div class="no-repeat">Sin repetición</div>
    
  

Explicación del código

• .repeat: la imagen se repite horizontal y verticalmente, llenando todo el elemento
• .repeat-x: la imagen se repite solo horizontalmente
• .repeat-y: la imagen se repite solo verticalmente
• .no-repeat: la imagen no se repite y se muestra solo una vez

3.2 Propiedad background-size

La propiedad background-size controla el tamaño de la imagen de fondo. Permite cambiar el tamaño de la imagen para que se ajuste mejor al elemento.

Valores:

• auto: el tamaño de la imagen se determina automáticamente (por defecto)
• cover: la imagen se escala para cubrir completamente el elemento, manteniendo las proporciones
• contain: la imagen se escala para ajustarse completamente al elemento, manteniendo las proporciones
• Valores absolutos: por ejemplo, 100px 50px especifican el ancho y alto de la imagen en píxeles
• Valores porcentuales: por ejemplo, 50% 50% especifican el ancho y alto de la imagen en porcentajes del tamaño del elemento

1. Tamaño por defecto (auto):

El tamaño de la imagen se determina automáticamente (por defecto).

    
      .size-auto {
        width: 200px;
        height: 200px;
        background-image: url('https://via.placeholder.com/50');
        background-size: auto;
        border: 1px solid #000;
      }
    
  

    
      <div class="size-auto">Tamaño por defecto (auto)</div>
    
  

2. cover:

La imagen se escala para cubrir completamente el elemento, manteniendo las proporciones.

    
      .size-cover {
        width: 200px;
        height: 200px;
        background-image: url('https://via.placeholder.com/150');
        background-size: cover;
        border: 1px solid #000;
      }
    
  

    
      <div class="size-cover">Escalado para cubrir el elemento (cover)</div>
    
  

3. contain:

La imagen se escala para ajustarse completamente al elemento, manteniendo las proporciones.

    
      .size-contain {
        width: 200px;
        height: 200px;
        background-image: url('https://via.placeholder.com/150');
        background-size: contain;
        border: 1px solid #000;
      }
    
  

    
      <div class="size-contain">Escalado para ajustarse completamente (contain)</div>
    
  

4. Valores absolutos:

Por ejemplo, 100px 50px especifican el ancho y alto de la imagen en píxeles.

    
      .size-pixels {
        width: 200px;
        height: 200px;
        background-image: url('https://via.placeholder.com/150');
        background-size: 100px 50px;
        border: 1px solid #000;
      }
    
  

    
      <div class="size-pixels">Tamaño en píxeles (100px 50px)</div>
    
  

5. Valores porcentuales:

Por ejemplo, 50% 50% especifican el ancho y alto de la imagen en porcentajes del tamaño del elemento.

    
      .size-percent {
        width: 200px;
        height: 200px;
        background-image: url('https://via.placeholder.com/150');
        background-size: 50% 50%;
        border: 1px solid #000;
      }
    
  

    
      <div class="size-percent">Tamaño en porcentajes (50% 50%)</div>
    
  

Explicación del código:

• .size-auto: el tamaño de la imagen se determina automáticamente
• .size-cover: la imagen se escala para cubrir completamente el elemento, manteniendo las proporciones. Partes de la imagen pueden ser recortadas
• .size-contain: la imagen se escala para ajustarse completamente al elemento, manteniendo las proporciones. La imagen se verá completa pero pueden quedar espacios vacíos
• .size-pixels: el tamaño de la imagen está especificado en píxeles (100px de ancho y 50px de alto)
• .size-percent: el tamaño de la imagen está especificado en porcentajes del tamaño del elemento (50% de ancho y 50% de alto)

3.3 Uso conjunto de background-repeat y background-size

Las propiedades background-repeat y background-size se usan a menudo juntas para lograr el efecto deseado al mostrar imágenes de fondo.

Ejemplo de uso:

    
      .combined {
        width: 300px;
        height: 300px;
        background-image: url('https://via.placeholder.com/150');
        background-repeat: no-repeat;
        background-size: cover;
        border: 1px solid #000;
      }
    
  

    
      <body>
        <div class="combined">La imagen de fondo no se repite y se escala para cubrir el elemento</div>
      </body>
    
  

Explicación del código:

• background-repeat: no-repeat;: la imagen no se repite
• background-size: cover;: la imagen se escala para cubrir completamente el elemento, manteniendo las proporciones. Partes de la imagen pueden ser recortadas