¿Cómo cubrir todo el fondo con una imagen con CSS?

11-12-2025 - 👤 Andrés Cruz

Si alguna vez has intentado poner una imagen de fondo en CSS y hacer que realmente ocupe toda la pantalla, sabrás que no es tan trivial como suena. A veces la imagen se repite, otras queda con espacios en blanco o se ve deformada. En esta guía te cuento, desde la práctica, cómo hacerlo bien, rápido y sin perder calidad.

En esta entrada veremos una técnica que permite que una imagen de fondo cubra todo el ancho del navegador web.

1. Qué significa realmente “ocupar toda la pantalla” en CSS

Cuando hablamos de un fondo que ocupe toda la pantalla, lo que buscamos es que la imagen llene todo el viewport, independientemente del tamaño del monitor o del móvil.
Esto implica tres retos:

Que no se repita.
Que no se distorsione.
Que se adapte si el usuario redimensiona la ventana (y lo harán, créeme).

La primera vez que probé a usar una imagen enorme en un móvil, la carga tardó medio siglo y el resultado encima no era mejor. Desde ahí aprendí que “ocupar toda la pantalla” no va solo de CSS, sino también de rendimiento.

2. La regla clave: background-size: cover (y por qué funciona tan bien)

Aquí viene la magia.

La propiedad background-size: cover le dice al navegador:

“Escala la imagen lo más grande posible para que siempre cubra el área completa del fondo… aunque haya que recortar un poco los bordes”.

Es exactamente lo que queremos para un fondo full screen.

Cuando redimensiones la ventana (te recomiendo hacerlo para entenderlo bien), notarás que la imagen se mantiene siempre adaptada. Recuerdo la primera vez que jugué con esto: veía cómo la imagen se reajustaba sola y pensé: “ok, esto es lo que necesitaba”.

Por qué cover funciona tan bien

Mantiene la proporción de la imagen.
Llega a todos los bordes del viewport.
Evita el famoso “espacio blanco” en pantallas altas o anchas.

3. Configuración mínima recomendada del fondo (el combo infalible)

Si quieres un fondo perfecto, no basta con cover. Lo ideal es combinar varias propiedades. Esto es lo que yo uso siempre:

body {
 background-image: url('img/background_2500.jpg');
 background-size: cover;
 background-repeat: no-repeat;
 background-position: center center;
 background-attachment: fixed;
}

Ahora desglosamos:

background-position: center center

Coloca el foco de la imagen en el medio, X e Y.

La parte más interesante de la imagen suele estar justo ahí, así que centrarla es casi siempre acierto seguro.

background-repeat: no-repeat
- Evita la “alfombra de baldosas”. Solo se muestra una imagen.
background-attachment: fixed vs scroll
- fixed → crea un efecto tipo parallax sencillo.
- scroll → el fondo se mueve junto al contenido.

4. Cómo escribir el HTML y CSS base para un fondo full screen

No necesitas nada raro en el HTML, solo esto:

<body>
 <!-- contenido -->
</body>

Y en el CSS, simplemente aplicas el fondo al body.

Eso sí: asegúrate de que html, body { height: 100%; margin: 0; } esté presente para evitar saltos o huecos, especialmente en navegadores antiguos.

5. Optimizar la imagen: peso, resolución y formatos recomendados

Reglas importantes:

No uses una imagen de 5000px para móviles.
PNG solo si necesitas transparencia; JPG o WebP son más ligeros.
Usa herramientas como Squoosh o TinyPNG para bajar peso sin perder calidad.

En mi caso, antes cargaba una imagen enorme “por si acaso”. Luego comprendí que el usuario no va a apreciar detalle que su pantalla no puede mostrar y solo empeoras la carga.

6. Fondos responsive con media queries (sin cargar imágenes gigantes)

Esta es una de las partes más potentes que aprendí con práctica real: sirve imágenes diferentes según el ancho del dispositivo.

Otro posible agregado consisten en el uso de los Media Query; con los Media Query se pueden establecer imágenes acorde a la resolución del dispositivo (teléfono, tablet, computador) que está accediendo a la página; es decir si el usuario accede desde un dispositivo que tenga una resolución de 1280x720 píxeles no tiene mucho sentido utilizar una imagen con dimensiones mayores ya que el detalle no se va a apreciar y además, tardaría más tiempo en cargar.

Esto lógicamente afecta el rendimiento en general del site y la experiencia del usuario final; utilizar una imagen de menores dimensiones a la resolución del dispositivo tampoco es buena idea en la mayoría de las ocasiones porque se mostraría pixeladas; podríamos establecer unos Media Querys como los siguientes.

@media only screen and (max-width: 480px) {
 body {
   background-image: url('img/background_480.jpg');
 }
}
@media only screen and (max-width: 1280px) {
 body {
   background-image: url('img/background_1280.jpg');
 }
}

La primera vez que lo usé, noté que la web cargaba mucho más rápido en móviles. Y sin perder estética.

Cada media query contiene una sencilla regla que indica la url de la imagen a cargar; como podrás haberte dado cuenta, el nombre de la imagen indica el ancho de la misma; es decir:

El ancho de background_1980.jpg es de 1980px
El ancho de background_1280.jpg es de 1280px
El ancho de background_480.jpg es de 480px

Básicamente se especifican una serie de reglas que se ejecutan o no dependiendo de las dimensiones de la pantalla del dispositivo que accede al site, específicamente del valor máximo del ancho que puede tener la pantalla del dispositivo para ejecutar su CSS interno; es decir, si un usuario accede con un dispositivo que tiene 480px o 320px de ancho, se ejecutará el primer media query y esto evitará la carga de la imagen que posee un ancho de 2500px

Si el dispositivo tiene 980px o 1280px de ancho, entonces se ejecutará la segunda regla; de esta forma son cargadas imágenes de menores dimensiones y por lo tanto de un menor peso que se ajustan de una mejor a las especificaciones del dispositivo; hay que tener en cuenta que cargar una imagen de mayor dimensiones a la que se necesite solo traerá que se ralentice la carga del site.

¿Cuándo usar esto?

Si tu imagen pesa más de 500 KB.
Si tu proyecto recibe tráfico desde móviles (que es casi siempre).
Si la misma imagen tiene versiones optimizadas.

7. Comparación: cover vs contain vs auto

Valor Qué hace Cuándo usarlo
cover Cubre todo el área y recorta si hace falta Fondos full screen
contain Muestra toda la imagen sin recortar Si no quieres perder detalle
auto Mantiene tamaño original Fondos pequeños o repetidos

8. Errores comunes que rompen un fondo full screen

Cargar imágenes demasiado grandes
- → ralentizan el sitio y no aportan nada.
No usar no-repeat
- → fondo “cuadriculado” involuntariamente.
Olvidar background-position
- → la parte importante de la imagen queda fuera del área visible y no si esta centrada.
No usar media queries
- → móviles cargan imágenes que no necesitan.
Poner el fondo en un div con altura limitada
- → usa mejor body o un contenedor con height: 100vh.

9. Ejemplo completo listo para copiar/pegar

Aquí tienes el ejercicio completo:

html, body {
 margin: 0;
 padding: 0;
 height: 100%;
}
body {
 background-image: url('img/background_2500.jpg');
 background-position: center center;
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-size: cover;
}
/* versiones para móvil y tablet */
@media only screen and (max-width: 480px) {
 body {
   background-image: url('img/background_480.jpg');
 }
}
@media only screen and (max-width: 1280px) {
 body {
   background-image: url('img/background_1280.jpg');
 }
}

10. Conclusión

Poner una imagen de fondo en CSS que ocupe toda la pantalla no es complicado… si usas las propiedades correctas y optimizas las imágenes.
La clave está en:

background-size: cover
background-position: center center
background-repeat: no-repeat
background-attachment: fixed

Y media queries para servir la imagen adecuada

Con estas técnicas podrás tener fondos full screen elegantes, rápidos y adaptables, tal como los usan las mejores webs.

Emplearemos el valor cover de la propiedad background-size de CSS que nos hará casi todo el trabajo; en conjunto con otras reglas que ayudarán a mejorar la experiencia final.

La propiedad background-size define cómo se va a mostrar la imagen a establecer en el fondo; con el valor cover: "especifica que la imagen de fondo debe ser escalada lo más pequeño como sea posible asegurando al mismo tiempo tanto en sus dimensiones mayores o iguales que a las dimensiones correspondientes al área de posicionamiento de fondo." (Mozilla Developer ).

Para entender un poco mejor la idea veamos un par de ejemplos; te invito a que redimensiones la ventana y vea su comportamiento:

background-size: cover;

Puedes ver el ejemplo final dando clic aquí.

Acepto recibir anuncios de interes sobre este Blog.

Aprende a poner una imagen de fondo en CSS que ocupe toda la pantalla con background-size: cover, media queries y ejemplos listos para copiar. Guía práctica, rápida y optimizada.

11-12-2025 | 👤 Andrés Cruz

🇺🇸 In english