Conclusiones clave
- background-size: cover llena la caja conservando la relación de aspecto y recortando el desbordamiento.
- background-size: contain conserva la imagen completa y puede dejar espacio sin usar.
- background-size: 100% 100% fuerza un ajuste exacto y distorsiona las relaciones de aspecto que no coinciden.
«Estirar» puede significar llenar la caja, conservar la imagen completa, recortar los bordes, repetir una textura o distorsionar los píxeles de forma deliberada. Esos resultados usan CSS distinto y no deberían tratarse como intercambiables.
Lo más importante
- Los valores explícitos de longitud o porcentaje ofrecen un escalado controlado para maquetaciones con dirección de arte.
- background-repeat puede llenar un área de forma eficiente cuando el origen está diseñado como un mosaico.
- La función image-set puede seleccionar recursos de mayor densidad para las pantallas que puedan aprovecharlos.
Define el comportamiento de dimensionamiento deseado
Estirar es ambiguo. Puede significar llenar una caja recortando los bordes, conservar la imagen completa con espacio vacío, forzar la imagen a una forma exacta, repetir un mosaico o escalar a dimensiones explícitas. Define el resultado buscado antes de seleccionar una propiedad CSS, porque cada opción tiene consecuencias visuales y de rendimiento distintas.
Una imagen de fondo es pintura decorativa y no aporta ancho ni alto intrínsecos a su elemento. El contenedor necesita contenido, dimensiones, una altura mínima, una relación de aspecto u otra regla de maquetación antes de que el fondo se vuelva visible. Si la imagen transmite un significado esencial, usa en su lugar un elemento img o picture con el texto alternativo adecuado.
Llenar
Usa cover cuando la caja debe pintarse por completo y el recorte de los bordes es aceptable.
Ajustar
Usa contain cuando cada píxel del origen debe permanecer visible.
Distorsionar
Usa un escalado independiente de ancho y alto solo cuando las proporciones alteradas sean intencionales.
Rellena la caja con cover
background-size: cover conserva la relación de aspecto del origen y escala la imagen hasta llenar ambas dimensiones del contenedor. Si las relaciones del origen y del contenedor difieren, la dimensión más larga de la imagen se extiende más allá de la caja y se recorta. El navegador no entiende qué motivo importa, así que el posicionamiento centrado aún puede eliminar una cara, un producto o una etiqueta.
Usa background-position para proteger un área focal aprobada y luego prueba formas de contenedor extremas. El posicionamiento por porcentaje se basa en la diferencia entre el tamaño del contenedor y el de la imagen renderizada, y por eso 100 % alinea los bordes extremos en lugar de desplazar la imagen un único ancho completo del contenedor. Un recorte compacto aparte es más seguro cuando una sola posición focal no puede satisfacer todos los viewports.
.hero {
min-block-size: 24rem;
background-image: url('/media/landscape.webp');
background-position: 65% 40%;
background-size: cover;
background-repeat: no-repeat;
}Buenos usos
Imágenes hero fotográficas, tarjetas y paneles decorativos en los que una superficie a sangre importa más que mostrar cada borde.
Señal de fallo
Si se necesitan numerosos ajustes de posición específicos para cada punto de interrupción, es probable que la composición necesite otro derivado.
Conserva la imagen completa con contain
background-size: contain conserva la relación de aspecto y escala hasta que la imagen completa quepa dentro del contenedor. Como una dimensión puede quedar sin cubrir, combínalo con un color de fondo deliberado o con un tratamiento de repetición compatible. Este método es adecuado para logotipos, diagramas o marcos decorativos cuyo límite completo debe permanecer visible.
El valor contain no garantiza la legibilidad cuando la imagen de origen contiene texto. En tamaños estrechos, el material gráfico completo puede volverse demasiado pequeño aunque no se recorte nada. El texto importante debería ser HTML, y los diagramas con significado suelen corresponder al marcado semántico de imagen, donde se dispone de texto alternativo y de controles de origen adaptables.
.product-diagram {
aspect-ratio: 16 / 9;
background: #f4f6f8 url('/media/diagram.svg') center / contain no-repeat;
}Elegir el color circundante
La región sin cubrir forma parte del diseño, no es un espacio en blanco accidental.
Comprobar el tamaño mínimo útil
Conservar la imagen completa no resulta útil si sus detalles significativos se vuelven ilegibles.
Usa con cuidado el dimensionamiento exacto o explícito
background-size: 100% 100% escala los dos ejes de forma independiente para ajustarse al contenedor. Garantiza una cobertura completa sin recortes, pero distorsiona la imagen de origen siempre que las relaciones de aspecto difieren. Los círculos se convierten en óvalos, los rostros cambian de forma y los logotipos pierden su geometría prevista. Reserva este método para texturas abstractas o material gráfico intencionalmente flexible.
Los tamaños de uno y de dos valores pueden usar longitudes, porcentajes, auto o unidades relacionadas con el viewport. Resultan útiles para efectos de dirección de arte, como un motivo de ancho fijo alineado a un lado. Recuerda que las unidades de viewport siguen al viewport y no al componente, de modo que una tarjeta reutilizable puede recibir un fondo demasiado grande cuando se incrusta en una maquetación inesperada.
Conservar un eje
Un valor como 100% auto escala el ancho y deja que la altura siga la relación de aspecto de la imagen de origen.
Preferir reglas relativas al componente
Usa las dimensiones del contenedor o puntos de interrupción cuando el material gráfico pertenece a un componente reutilizable.
Repite mosaicos y superpón capas de fondo
Una textura pequeña y sin costuras puede rellenar un área grande con background-repeat en lugar de descargar un mapa de bits grande. Controla la repetición en cada eje y verifica las uniones en los niveles de zoom y las densidades de píxeles habituales. No repitas motivos fotográficos ni material gráfico con bordes evidentes, salvo que la repetición forme parte del diseño.
CSS admite varias capas de fondo, que se pintan con la primera capa de la lista arriba. Un degradado puede situarse sobre una fotografía para mejorar la separación del texto, mientras que un color aporta el respaldo final. Mantén alineados por capa los valores de tamaño, posición y repetición, porque las listas separadas por comas que no coinciden son difíciles de depurar.
Economía del mosaico
Un mosaico creado a propósito puede reducir el tamaño de transferencia, pero un exceso de detalle todavía puede hacer que la superficie repetida distraiga.
Moderación con las capas
Cada imagen adicional puede añadir una petición, un costo de decodificación y una responsabilidad de mantenimiento.
Selecciona recursos adaptables y de alta densidad
Usa media queries cuando el contenedor requiere un recorte o un tamaño de imagen de origen sustancialmente distinto. image-set de CSS puede ofrecer candidatos de densidad o de formato para una misma composición, pero no ofrece la misma selección basada en el ancho ni el mismo comportamiento semántico que picture y srcset. Incluye un respaldo normal de background-image cuando lo exija la matriz de navegadores compatibles.
Un candidato de alta densidad debería contener píxeles suficientes para el tamaño CSS renderizado y la densidad de la pantalla, pero más no es automáticamente mejor. Los archivos demasiado grandes aumentan la transferencia, la memoria de decodificación y el trabajo de pintado. Inspecciona qué candidato solicita el navegador en dispositivos reales y asegúrate de que se almacene en caché con las cabeceras esperadas.
Evitar descargas duplicadas
Comprueba que las reglas de preload, las declaraciones base, las media queries e image-set no provoquen la descarga de candidatos que no se usan.
Medir la demanda renderizada
Basa las dimensiones de los derivados en los tamaños reales de los componentes y no en las resoluciones de marketing de los dispositivos.
Prepara las imágenes de origen para sus espacios
Un solo archivo maestro rara vez encaja igual de bien en un hero ancho, una tarjeta cuadrada y un panel móvil vertical. Genera derivados en torno a las relaciones de aspecto reales de los contenedores y a las dimensiones en píxeles previstas. Conserva la relación de aspecto de la imagen de origen cuando importa la imagen completa y crea recortes revisados para los espacios que se deben rellenar. La aplicación sigue siendo la que decide si cada composición conserva el significado.
Guarda el original por separado, publica solo derivados validados y usa referencias versionadas y estables en el CSS. Procesar menos variantes, pero con un propósito claro, suele costar menos que producir todas las combinaciones de tamaño y formato. Vigila las dimensiones y los bytes de salida para que una subida incorrecta o un cambio en el procesamiento no aumenten en silencio el costo de entrega.
Revisar los recortes
La selección automática del punto focal resulta útil para los candidatos, pero la identidad de marca, la seguridad y la conservación del motivo requieren criterio humano.
Normalizar las entradas
Corrige la orientación y rechaza las dimensiones poco razonables de la imagen de origen antes de derivar los fondos de producción.
Prueba la accesibilidad, los fallos y las operaciones
Mantén el texto y los controles esenciales fuera del fondo. Verifica que haya contraste legible sobre cada recorte final, foco de teclado visible, zoom de texto, comportamiento con movimiento reducido y un estado utilizable de color sólido cuando la imagen no está disponible. El fondo de posición fija puede rendir mal o comportarse de otra manera en dispositivos móviles, así que trátalo como una mejora y prueba los dispositivos de destino.
Limita la velocidad de la red e inspecciona la estabilidad de la maquetación, el Largest Contentful Paint, los bytes solicitados, el estado de la caché y los errores de imagen. Prueba recursos transparentes, archivos faltantes, imágenes de origen inusualmente altas y contenedores en ambos extremos de la relación de aspecto. Protege los endpoints de subida y de procesamiento con validación confiable, solicitudes firmadas cuando corresponda y credenciales que nunca lleguen al CSS público ni al código del navegador.
Comprobaciones operativas
Configura alertas para derivados faltantes, fallos de procesamiento, tamaños de archivo inesperados y aumentos sostenidos en la entrega.
Despliegue seguro
Publica recursos versionados, verifica el renderizado en producción y luego cambia las referencias conservando una reversión a una versión verificada.
Detalles técnicos que conviene conocer
- Con cover, el navegador escala hasta que ambas dimensiones llenan la caja; con contain, escala hasta que ambas dimensiones caben. La relación de aspecto de la imagen de origen se conserva en ambos casos.
- Las posiciones de fondo en porcentaje se calculan a partir de la diferencia entre el tamaño del contenedor y el de la imagen renderizada, y por eso 100 % alinea los bordes opuestos en lugar de desplazar la imagen el ancho completo del contenedor.
- Las imágenes de fondo no aportan dimensiones intrínsecas a un elemento. La maquetación necesita contenido, dimensiones, aspect-ratio o padding explícitos antes de que el fondo pueda ocupar espacio visible.
- Usar 100% 100% escala ambos ejes de forma independiente y, por lo tanto, distorsiona círculos, rostros, logotipos y texto siempre que las relaciones de aspecto de origen y de destino difieren.
- Los fondos múltiples de CSS se pintan en el orden de la lista, con la primera capa arriba, lo que permite que los degradados protejan el texto sin editar el material gráfico original.
- Los candidatos de imagen de alta densidad solo ayudan cuando sus píxeles de origen adicionales se corresponden con el tamaño renderizado; los archivos demasiado grandes siguen costando ancho de banda y memoria de decodificación.
Un enfoque práctico
- 1
Define el comportamiento visual deseado antes de elegir una regla background-size.
- 2
Exporta derivados en función de las relaciones reales del contenedor y de las dimensiones renderizadas esperadas.
- 3
Establece un color de fondo para que las zonas en carga y las transparentes fallen de forma elegante.
- 4
Inspecciona los recortes en los extremos del contenido y mide el tamaño de transferencia en móvil.
Límite de la arquitectura
El dimensionamiento con CSS cambia cómo se pinta una imagen, no el archivo de origen en sí. La aplicación debe decidir si la imagen debe recortarse, repetirse, distorsionarse o permanecer completamente visible, y debe proporcionar recursos de origen adecuados para esa decisión.
Preguntas frecuentes
¿Cuál es la diferencia entre cover y contain?
El valor cover llena el contenedor y puede recortar los bordes. El valor contain muestra la imagen completa y puede dejar espacio sin cubrir. Ambos conservan la relación de aspecto del origen.
¿Cómo puedo estirar un fondo sin distorsión?
Usa cover cuando el recorte sea aceptable, o contain cuando el espacio vacío sea aceptable. Los valores independientes como 100% 100% distorsionan cualquier origen cuya relación de aspecto difiera de la del contenedor.
¿Por qué no se ve mi imagen de fondo?
Puede que el elemento no tenga contenido ni dimensiones, que la URL haya fallado, que otra capa lo cubra o que la declaración esté anulada. Inspecciona el tamaño calculado y las propiedades de fondo del elemento y luego revisa la solicitud de red.
¿Las imágenes con significado deberían usar fondos CSS?
Normalmente no. Usa img o picture cuando la imagen comunique información, porque esos elementos admiten texto alternativo, dimensiones intrínsecas y selección de origen adaptable.
¿Puede un servicio de procesamiento de imágenes elegir el modo de dimensionamiento de CSS?
No. Un pipeline de imágenes puede generar derivados que se ajusten mejor a las relaciones de aspecto y los tamaños previstos, pero la aplicación debe decidir si el CSS debe recortar, contener, repetir, distorsionar o reposicionar cada imagen en su maquetación real.