En la actualidad, la gran mayoría del tráfico que llega a los sitios web proviene de usuarios que navegan desde teléfonos móviles y tablets. Por eso es importante tener claro cómo implementar una imagen de fondo responsive con CSS3, pues es lo que permite que el aspecto de las páginas web se adapte a la perfección a cualquier modelo y tamaño de pantalla, garantizando así la mejor experiencia de usuario posible.
Con solo unas líneas de código, podrás lograr que tu web se vea igual de bien en un monitor de ordenador de grandes dimensiones que en la pantalla más pequeña, ¡por eso vamos a contarte cómo utilizar imágenes y CSS en tu beneficio!
Si quieres ganar la máxima visibilidad para tus proyectos en línea sin sacrificar ni el rendimiento ni la accesibilidad para conseguirlo, presta atención, ¡porque lo que vamos a contarte te interesa!
¿Qué es una imagen de fondo responsive en CSS3?
Una imagen de fondo responsive está configurada con el fin de adaptarse a la perfección al tamaño y la resolución de cualquier pantalla, sin deformarse ni perder calidad para conseguirlo.
¿Te imaginas acceder a una web desde tu móvil de última generación y que la imagen de cabecera no se ajuste bien? ¿Y qué tal sería toparse con un fondo enorme desde tu ordenador que tarda la misma vida en cargar? Sus creadores estarían tirando por la borda toda la User Experience (UX), ¡menos mal que herramientas como nuestro Creador de Páginas Web te lo pone bien fácil para hacer las cosas bien!
Una imagen de fondo responsive utiliza propiedades como ‘background-size: cover’ o ‘contain’ que ajustan la imagen para que llene el contenedor sin deformarse. Además, con ‘media queries’ podrás cargar versiones específicas de la imagen, como por ejemplo una para móviles, otra para tablets y otra para escritorio, optimizando así el peso y la calidad de cada una.
A día de hoy, como sabrás si ya disfrutas de las cualidades del hosting WordPress de GoDaddy, los usuarios exigen velocidad y estética al instante, dos aspectos que no debes dejar de lado si quieres que tus proyectos online tengan éxito. No se trata solo de que se vean bien, se trata de ofrecer una navegación fluida, estética y rápida en todos los dispositivos. ¡Y CSS3 es una de las mejores herramientas para conseguirlo!
¿Cómo insertar imágenes adaptables en CSS3?
Para poder insertar una imagen responsive en CSS3 como fondo de tu web es necesaria la propiedad background-size de CSS que admite el valor cover.
Cover se encarga de “decirle” al navegador que el alto y ancho de la imagen se tienen que escalar de forma automática y proporcional de acuerdo a la ventana de visualización o viewport.
Si quieres que una imagen con una resolución excesiva se visualice en dispositivos móviles, es tan simple como hacer uso de los media queries de CSS3. Así, se indica el uso de una imagen diferente (ya sea en su tamaño o incluso otra imagen distinta) si se accede a la web desde un dispositivo móvil.
Una imagen con un tamaño de 5500x3600px es lo más adecuado para pantallas grandes (escritorios de PC, televisiones, etc.). Sin embargo, teniendo en cuenta el rendimiento web, lo más recomendable es que no se use la misma imagen para webs visualizadas desde cualquier tablet o smartphone.
En lugar de un archivo de gran tamaño, emplearemos una imagen para estos dispositivos y otra de alta resolución para pantallas más grandes. Y es que en el caso de los móviles, también tienes que pensar en la velocidad de su conexión a Internet.
¿Por qué se utiliza una imagen tan grande? Porque la imagen se verá pixelada (debido a su expansión) en el caso de que el tamaño de la imagen sea menor que el ancho de ventana del navegador o el ancho de la pantalla.
Cómo crear imágenes responsive con CSS
En primer lugar, deberás crea un código de HTML donde sólo tendrás que insertar el enlace a la hoja de estilos CSS, que es donde trabajarás con la imagen 100% responsive.
<!doctype html>
<html>
<body>
…Contenido de tu web…
</body>
</html>
Introduce la regla principal:
background-size: cover;
Código CSS
Una vez indicada la localización del archivo, y su posicionamiento y alineación, fijaremos su posición y le indicaremos que modifique su tamaño original (manteniendo el formato) de forma que cubra todo el ancho del navegador utilizando ‘cover’. Y, si queremos, también podemos indicar un color de fondo para que se muestre mientras esperamos a que cargue.
body {
/* Ubicación de la imagen */
background-image: url(images/background-photo.jpg);
/* Para dejar la imagen de fondo centrada, vertical y
horizontalmente */
background-position: center center;
/* Para que la imagen de fondo no se repita */
background-repeat: no-repeat;
/* La imagen se fija en la ventana de visualización para que la altura de la imagen no supere a la del contenido */
background-attachment: fixed;
/* La imagen de fondo se reescala automáticamente con el cambio del ancho de ventana del navegador */
background-size: cover;
/* Se muestra un color de fondo mientras se está cargando la imagen
de fondo o si hay problemas para cargarla */
background-color: #66999;
}
También puedes escribir el código en una sola línea y quedaría de la siguiente forma:
body {
background: #66999 url(background-photo.jpg) center center cover no-repeat fixed;
}
¿Cómo se introducen los media queries de CSS3 para dispositivos móviles?
Como te comentaba antes, el problema que nos podemos encontrar al hacer esta implementación, es que las imágenes puede resultar muy grandes para determinados dispositivos o conexiones.
Para evitarlo y solventar este problema dada la gran variedad de dispositivos, debes hacer uso de dos cosas:
- Una imagen más pequeña para las pantallas con resolución más baja.
- Media Queries para indicarle al navegador a partir de qué resolución debe utilizar una u otra.
Aquí tienes un ejemplo del uso de una imagen distinta (o de la misma pero con un tamaño menor) para dispositivos con una pantalla de tamaño de 767px o menor.
@media only screen and (max-width: 767px) {
body {
background-image: url(images/background-photo-mobile-devices.jpg);
}
La importancia del concepto de imágenes adaptables
Las imágenes son una parte fundamental para el diseño web, sin duda. Si tus usuarios se encuentran con una web llena de textos, con párrafos y más párrafos, sin gráficos o fotos, seguramente les parecerá tremendamente aburrida.
Sin embargo, en términos generales las distintas resolución de las pantallas supone un problema de imágenes que no se visualizan bien desde todos los dispositivos, bien sea por su tamaño original, porque el ancho de la imagen es inferior a la dimensión de la pantalla o porque la página no tiene un diseño web responsivo.
Por eso siempre debes tener en cuenta la experiencia de los usuarios que te visitan. Aunque una imagen al ancho total del contenedor resulta muy atractiva, debes implementarla correctamente. A nadie le gusta esperar a que se carguen los contenidos de tu web y corres el riesgo de que decidan abandonar la visita.
Ejemplo completo de imagen de fondo responsive
Crear una imagen responsive para el fondo de una página web resulta sencillo si se tienen claros los pasos a seguir. Para hacerlo, asegúrate de seleccionar las propiedades CSS adecuadas y de definir ‘media queries’ que te permitan ajustar la imagen en función del dispositivo en el que aparecerá.
Ahora bien, como siempre resulta más sencillo ver las cosas, hemos elaborado un ejemplo detallado en HTML de una imagen responsive en CSS3 para el fondo de tu web que te permitirá visionar claramente todo lo que te comentaremos justo a continuación.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
margin: 0;
padding: 0;
background: url('bg-desktop.jpg') center center/cover no-repeat fixed;
background-color: #333;
}
@media (max-width: 767px) {
body {
background: url('bg-mobile.jpg') center center/cover no-repeat fixed;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
body {
background: url('bg-tablet.jpg') center center/cover no-repeat fixed;
}
}
</style>
<title>Fondo Responsive</title>
</head>
<body>
<h1>Mi sitio web</h1>
<p>Contenido aquí...</p>
</body>
</html>
- Propiedad ‘background-size: cover’: Garantiza que la imagen cubrirá todo el viewport manteniendo su proporción.
- ‘background-position: center center’ y ‘no-repeat’: Centran la imagen y evitan repeticiones.
- ‘background-attachment: fixed’: Fija la imagen al fondo, logrando un efecto de parallax simple.
- Media queries para optimización: Cargan una versión ligera en móvil (<768 px), reduciendo peso y tiempo de carga, o también pueden cargar una versión intermedia en tablets (768–1024 px), adaptando la calidad y el tamaño según el dispositivo desde el que decida acceder cada usuario.
Todo esto asegura que el navegador cargue únicamente la imagen adecuada: ligera para móviles, intermedia para tablets y de alta resolución para escritorio. Así mejorarás la velocidad de carga, optimizarás la experiencia de usuario y mantendrás una estética impecable en cualquier clase de pantalla.
Y si quieres ir más allá, puedes utilizar ‘image-set()’ para servir variantes en función de la densidad de píxeles del dispositivo (por ejemplo, versiones @2x), o automatizar la redimensión a través de servicios CDN o herramientas como Cloudinary, que permiten generar URLs adaptadas a cada necesidad.
Con este completo ejemplo, con propiedades CSS y ‘media queries’, tendrás una base sólida con la que poder implementar un fondo responsive que combine un buen rendimiento, elegancia y la máxima funcionalidad. ¿Sospechabas siquiera que CSS3 resultaba tan útil y tan fácil de utilizar?
