Curso de CSS / fondos de color e imagen: cover y contain

CSS

Creado 2026-11-07 Última modificación 2026-11-07

Los fondos en CSS pueden llenar un elemento con color o imagen mientras dejan el contenido HTML sin cambios. background-size: cover llena el área y puede recortar la imagen; contain muestra toda la imagen y puede dejar espacio sin usar.

Comprende los colores y las imágenes de fondo

El color de fondo es visible donde no hay imagen y detrás de las áreas transparentes. El color de fondo puede permanecer incluso cuando la imagen no se ha cargado. La propia imagen de fondo no es el contenido del elemento y no crea automáticamente la altura del elemento. Si solo colocas la URL de la imagen en un div vacío y no especificas una altura, puede que no haya ningún área para mostrarla. Al mostrar fotos significativas como contenido HTML, compáralo con el ejemplo usando Imágenes y Video Responsivos: relación de aspecto y object-fit.

.sample {
  height: 300px;
  background-color: #e8e8e8;
  background-image: url("images/landscape.webp");
}

Si la propia imagen transmite información, como una foto o un diagrama explicativo en el texto, es apropiado usar HTML img y texto alternativo. No se puede adjuntar directamente el atributo alt a un fondo CSS. En el cuadro de ejercicio de espacio en blanco de esta lección, colocarás un nombre de accesibilidad que describa los resultados de la comparación, pero no necesitas agregar un role cada vez que uses el fondo decorativo en un servicio real. No pongas descripciones importantes solo en la imagen de fondo.

Prepara la imagen de muestra y la carpeta

Abre la imagen de fondo de práctica de 600×400 a continuación y guárdala con el nombre landscape.webp. Usa los árboles de la izquierda y la derecha y el círculo central como objetos de comparación. Coloca la imagen con proporción 3:2 en un cuadro cuadrado para que sea fácil ver dónde se recortan las partes.

background-practice/
  backgrounds.html
  images/
    landscape.webp

Debido a que el ejemplo incrusta su CSS en backgrounds.html, images/landscape.webp se resuelve desde ese documento HTML. Si mueves los estilos a css/style.css, utiliza ../images/landscape.webp para la misma imagen. Las URL relativas en CSS externo se resuelven desde la hoja de estilos. Verifica también mayúsculas y minúsculas del nombre del archivo y las extensiones. Para más detalles, consulta MDN: background-image y las rutas de imagen . Consulta Aplicar CSS con estilos en línea, internos y externos.

Compara cover y contain

valor	proporción de la imagen	Resultado de colocar una imagen de 600×400 en un cuadro de 300×300
cover	mantener	Se escala a 450×300 y se recortan 75px a la izquierda y derecha.
contain	mantener	Reducir a 300×200, dejando 50px en la parte superior e inferior.
100% 100%	Las proporciones originales pueden variar	Un círculo puede transformarse en un óvalo configurándolo a 300×300.

Estas dimensiones asumen un área de fondo de 300 × 300, posicionamiento centrado, sin repetición y sin borde o relleno. cover llena el área recortando parte de la imagen; contain conserva toda la imagen y muestra el color de fondo en el espacio no utilizado. Cuando la imagen y el área tienen la misma proporción, los dos resultados pueden verse idénticos. Véase MDN: tamaño de fondo.

La comparación esquemática usa un paisaje de 3:2 para ilustrar los dos cálculos de tamaño. Con cover, los lados se recortan. Con contain, toda la imagen permanece visible y el fondo gris aparece encima y debajo de ella. El ejemplo completo permite comparar estos efectos con la imagen de práctica suministrada.

Si comparas cover·contain con solo un degradado CSS que no tiene un tamaño y proporción únicos, la diferencia será casi invisible ya que llena la misma área. Para practicar el recorte, utiliza un archivo de imagen con un tamaño y proporción fijos como ahora.

Controla la repetición y la posición

.repeat {
  background-size: 100px auto;
  background-repeat: repeat;
  background-position: left top;
}

.no-repeat {
  background-size: 100px auto;
  background-repeat: no-repeat;
  background-position: left top;
}

background-size: 100px auto establece el ancho en 100px y la altura para coincidir con la proporción original. repeat llena el área de fondo con una imagen pequeña repetidamente, no-repeat la muestra solo una vez. Debido a la repetición básica, la imagen puede repetirse incluso en el espacio vacío de contain, así que especifica no-repeat al comparar una imagen completa.

background-position establece los criterios para colocar imágenes. center reparte el espacio sobrante o el recorte entre ambos lados; left top alinea la imagen en la esquina superior izquierda. Si cambias la posición con cover, el tamaño no cambia, pero cambia el lado que se recorta. El ejemplo usa propiedades separadas, así que ten cuidado de no inicializar otros ajustes más tarde añadiendo la propiedad abreviada background.

Ejecuta el ejemplo completo de fondo

Guarda el código siguiente como UTF-8 en backgrounds.html en la carpeta preparada anteriormente y ábrelo. Usa la misma imagen en cuatro cuadros para comparar tamaño y repetición. Si la ventana es estrecha, el ancho del cuadro se reducirá y la altura permanecerá en 300px, así que también se recalculará el tamaño del recorte y del espacio vacío.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Comparing background image sizes</title>
  <style>
    * { box-sizing: border-box; }
    body { margin: 24px; color: #333; font: 1rem/1.7 sans-serif; }
    .sample { width: 100%; max-width: 300px; height: 300px; margin-block-end: 24px;
      background-color: #e8e8e8; background-image: url("images/landscape.webp");
      background-position: center; background-repeat: no-repeat; }
    .cover { background-size: cover; }
    .contain { background-size: contain; }
    .repeat { background-size: 100px auto; background-repeat: repeat; background-position: left top; }
    .no-repeat { background-size: 100px auto; background-position: left top; }
  </style>
</head>
<body>
  <h1>Comparing background images</h1>
  <h2>cover：Fill the box</h2><div class="sample cover" role="img" aria-label="Background with left and right sides cut out"></div>
  <h2>contain：Contains the entire picture</h2><div class="sample contain" role="img" aria-label="Background with empty space above and below"></div>
  <h2>repeat: small repetition</h2><div class="sample repeat" role="img" aria-label="Background with repeated small pictures"></div>
  <h2>no-repeat：Show small once</h2><div class="sample no-repeat" role="img" aria-label="Background with only one page displayed in the upper left corner"></div>
</body>
</html>

Cambia una propiedad a la vez

Asegúrate en las Herramientas de Desarrollador de que la ventana sea lo suficientemente ancha para que las dos primeras cajas sean de 300×300. Compara los cortes izquierdo y derecho de cover y el espacio superior e inferior de contain.
Cambia solo background-position de cover a left top. Después de asegurarte de que más árboles a la izquierda sean visibles y más a la derecha estén cortados, vuelve a center.
Cambia background-repeat en contain a repeat. Verifica si parte de la imagen se repite en el espacio vacío y vuelve a no-repeat.
Cambia el tamaño de .no-repeat de 100px auto a 100% 100%. Verifica si las proporciones del círculo central cambian y vuelve a sus valores originales.

Diagnostica imágenes que no aparecen y recortes inesperados

Abre el enlace de la imagen de práctica directamente para asegurarte de que el archivo original sea visible. Verifica el nombre del archivo guardado y la extensión real, y calcula la ruta según la ubicación del HTML/CSS.
Inspecciona la solicitud de imagen en el panel Network de DevTools. Una respuesta 404 requiere verificar la ruta. Si la respuesta tiene éxito pero la imagen es invisible, inspecciona las dimensiones del contenedor y la declaración de background-image aplicada.
Si quieres que se llene sin espacio vacío, verifica si tiene cover. Para mostrar la imagen completa, especifica contain y no-repeat juntos. Si la imagen y el área tienen la misma proporción, la diferencia entre los dos valores será pequeña.
Si estás agregando un fondo detrás de tu texto, asegúrate de que el texto sea legible tanto en áreas claras como oscuras. Debido a que el propósito de esta lección es comparar imágenes, el texto explicativo se coloca fuera del cuadro.

Antes de estirar forzosamente la imagen de fondo, decide si es una imagen que debe verse en su totalidad o una decoración que puede recortarse. Las imágenes que deben verse completas, como fotos de productos o diagramas descriptivos, y los fondos decorativos no deben tratarse bajo el mismo estándar.

CSS