La Propiedad BACKGROUND-SIZE

Especifica el tamaño de las imágenes de fondo. Permite controlar cómo se escalan las imágenes para ajustarse al contenedor del elemento.

La propiedad background-size en CSS especifica el tamaño de las imágenes de fondo. Te permite controlar cómo se escalan las imágenes para ajustarse al contenedor del elemento.

Sintaxis Básica

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

CSS
 
selector {
  background-image: url('tu-imagen.jpg'); /* Necesitas una imagen de fondo para ver el efecto */
  background-repeat: no-repeat; /* Generalmente se usa con no-repeat para ver la posición y el tamaño */
  background-size: valor;
}

Donde selector es el elemento HTML al que quieres aplicar el tamaño del fondo y valor puede ser uno de los siguientes:

Valores de la Propiedad background-size

La propiedad background-size puede tomar varios valores para definir el tamaño de la imagen de fondo:

1. auto

Este es el valor predeterminado. La imagen de fondo se muestra en su tamaño original. Si la imagen es más grande que el elemento, se recortará. Si es más pequeña, se mostrará en su tamaño real y el resto del fondo estará vacío (a menos que se haya definido un background-color).

Ejemplo:

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .elemento {
    width: 300px;
    height: 200px;
    border: 1px solid black;
    background-image: url('https://via.placeholder.com/400x300'); /* Imagen más grande que el div */
    background-repeat: no-repeat;
    background-size: auto; /* Tamaño original (se recortará) */
  }
</style>
</head>
<body>

  <div class="elemento">Este div muestra la imagen de fondo en su tamaño original.</div>

</body>
</html>

2. cover

Este valor escala la imagen de fondo para cubrir completamente el área del contenedor. La imagen se estirará o se recortará según sea necesario para llenar el espacio, manteniendo su relación de aspecto. Algunas partes de la imagen podrían no ser visibles.

Ejemplo:

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .elemento {
    width: 300px;
    height: 200px;
    border: 1px solid black;
    background-image: url('https://via.placeholder.com/400x300');
    background-repeat: no-repeat;
    background-size: cover; /* La imagen cubre todo el div (puede recortarse) */
  }
</style>
</head>
<body>

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

</body>
</html>

La imagen se escalará para cubrir completamente el div de 300x200 píxeles, posiblemente recortando los bordes superior e inferior o los laterales de la imagen original de 400x300.

3. contain

Este valor escala la imagen de fondo para que quepa completamente dentro del área del contenedor, manteniendo su relación de aspecto. Esto significa que toda la imagen será visible, pero podría haber espacios vacíos alrededor si la proporción de la imagen no coincide con la del contenedor.

Ejemplo:

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .elemento {
    width: 300px;
    height: 200px;
    border: 1px solid black;
    background-image: url('https://via.placeholder.com/400x300');
    background-repeat: no-repeat;
    background-size: contain; /* La imagen cabe dentro del div (puede haber espacio vacío) */
  }
</style>
</head>
<body>

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

</body>
</html>

La imagen se escalará para que quepa completamente dentro del div de 300x200 píxeles, manteniendo su proporción de 4:3. Esto resultará en espacios vacíos en la parte superior e inferior del div.

4. Valores de Ancho y Alto Específicos

Puedes especificar el ancho y el alto de la imagen de fondo utilizando unidades de medida (píxeles, ems, etc.) o porcentajes.

  • Un valor: Si se proporciona un solo valor, se interpreta como el ancho, y el alto se ajusta automáticamente para mantener la proporción original de la imagen (equivalente a auto para la altura).
  • Dos valores: El primer valor representa el ancho y el segundo representa el alto. La imagen se escalará a las dimensiones especificadas, lo que podría distorsionar la proporción original.

Ejemplos:

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .elemento {
    width: 300px;
    height: 200px;
    border: 1px solid black;
    background-image: url('https://via.placeholder.com/150'); /* Imagen cuadrada de 150x150 */
    background-repeat: no-repeat;
    margin-bottom: 10px;
  }

  .tamano-100px { background-size: 100px; /* Ancho 100px, alto proporcional */ }
  .tamano-50porciento { background-size: 50%; /* Ancho 50% del contenedor, alto proporcional */ }
  .tamano-150px-100px { background-size: 150px 100px; /* Ancho 150px, alto 100px (puede distorsionarse) */ }
  .tamano-80porciento-auto { background-size: 80% auto; /* Ancho 80%, alto proporcional */ }
</style>
</head>
<body>

  <div class="elemento tamano-100px">Tamaño: 100px</div>
  <div class="elemento tamano-50porciento">Tamaño: 50%</div>
  <div class="elemento tamano-150px-100px">Tamaño: 150px 100px</div>
  <div class="elemento tamano-80porciento-auto">Tamaño: 80% auto</div>

</body>
</html>

Combinación de Valores

Puedes combinar palabras clave con valores específicos. Por ejemplo:

  • background-size: cover 50%; (Aunque esto no es una sintaxis válida. cover y contain son valores únicos).
  • Para especificar un tamaño y luego un comportamiento para la segunda dimensión, se usan dos valores separados. Por ejemplo, si quieres que el ancho sea cover y el alto sea auto, no es posible directamente con background-size. Tendrías que usar otras técnicas o considerar el uso de object-fit si la imagen estuviera en un <img> tag.

La forma correcta de especificar dos dimensiones es con dos valores separados por un espacio, como se mostró en el ejemplo anterior (150px 100px, 80% auto).

Interacción con Otras Propiedades de Fondo

  • background-repeat: Si la imagen es más pequeña que el contenedor y background-repeat no está establecido en no-repeat, la imagen se repetirá para llenar el espacio restante, independientemente del valor de background-size.
  • background-position: background-size afecta el tamaño de la imagen que se va a posicionar con background-position.

Casos de Uso Comunes

  • Fondos de pantalla a pantalla completa: Usar background-size: cover; para que una imagen cubra toda la ventana del navegador.
  • Mostrar patrones a un tamaño específico: Utilizar valores en píxeles o porcentajes para controlar el tamaño de un patrón de fondo repetitivo.
  • Asegurar que una imagen quepa dentro de un contenedor sin recortarse: Usar background-size: contain;.
  • Diseños responsivos: Utilizar porcentajes para que el tamaño del fondo se ajuste al tamaño del contenedor.

Consideraciones

  • Calidad de la imagen: Escalar imágenes demasiado pequeñas puede resultar en una pérdida de calidad (pixelación). Asegúrate de usar imágenes con suficiente resolución para el tamaño al que las vas a escalar.
  • Relación de aspecto: Al especificar un ancho y un alto que no coinciden con la relación de aspecto original de la imagen, esta puede aparecer estirada o comprimida.
  • Rendimiento: Las imágenes de fondo grandes, especialmente si se escalan con cover, pueden afectar el rendimiento de carga de la página. Optimiza tus imágenes para la web.

Conclusión

La propiedad background-size es una herramienta poderosa para controlar cómo se ven tus imágenes de fondo en CSS. Ya sea que necesites cubrir completamente un área, asegurarte de que una imagen quepa dentro de un contenedor o especificar dimensiones exactas, esta propiedad te brinda la flexibilidad necesaria para lograr el diseño visual deseado. ¡Experimenta con los diferentes valores para encontrar la mejor manera de mostrar tus imágenes de fondo!