Imagen responsive en CSS3 para el fondo de tu web

Un truco muy visual

Uno de los efectos visuales más atractivos a la hora de crear una web es posiblemente el uso de imágenes grandes que ocupan el fondo de tu sitio web completamente. Una imagen responsive es fundamental.

El problema que suele tener esta técnica es que se utilizan imágenes muy grandes que pueden comprometer el rendimiento de tu página web en dispositivos móviles que, además, pueden tener una conexión limitada o incluso tener que pagar por la descarga de datos.

En este post aprenderás a implementar correctamente una imagen que ocupe todo el fondo en cualquier dispositivo.

 

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 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.) y, teniendo en cuenta el rendimiento web, lo más recomendable es el uso de dos imágenes: una para dispositivos móviles y otra de alta resolución, ya 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.

Pasos a seguir

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 (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, debes hacer uso de dos cosas:

  1. Una imagen más pequeña para las pantallas con resolución más baja.
  2. 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);

}

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.

Por eso siempre debes tener en cuenta la experiencia de los usuarios que te visitan y, aunque una imagen grande de fondo 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.

Te animo a que experimentes mucho más con tus imágenes y CSS3 ya que se pueden hacer cosas muy interesantes como añadir sombras, hacer recortes o viñeteados, oscurecer o crear efectos de color aplicando gradientes… y mucho más.

Imagen de Visual Hunt

Maria Acibeiro
Aterrizada en el mundo del hosting web hace algo más de dos años, licenciada en Ciencias Económicas y apasionada del mundo del marketing digital, María Acibeiro forma parte del equipo de GoDaddy EMEA (ES). Le encanta escribir sobre redes sociales, WordPress, email marketing… o cualquier otra cosa en lo que pueda ser creativa.