2

Imagen responsive en CSS3 para el fondo de tu web

Ejemplo de imagen de fondo

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 queremos 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 reconmendable 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

body {

  /* Ubicación de la imagen */                        

  background-imageurl(images/background-photo.jpg);

 

  /* Para dejar la imagen de fondo centrada, vertical y

      horizontalmente */

  background-positioncenter center;

 

  /* Para que la imagen de fondo no se repita */

  background-repeatno-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-attachmentfixed;

 

  /* 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 {

  backgroundurl(background-photo.jpg) center center cover no-repeat fixed;

}

 

¿Cómo se introducen los media queries de CSS3 para dispositivos móviles?

Os mostramos como ejemplo el 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);
      }
   }

Cuéntanos, ¿estás pensando en darle un cambio de look a tu web? ¡Anímate a probar este truco! Una imagen responsive en CSS3 de fondo llamará la atención de todas tus visitas.

 

Host Europe

Host Europe

Host Europe es más que un proveedor de hosting y dominios. Nos ganamos tu confianza día a día gracias a años de experiencia y el mejor servicio.

More Posts

Comentarios sobre "Imagen responsive en CSS3 para el fondo de tu web"

    1. María AcibeiroMaría Acibeiro

      ¡Hola, Emilio! Hemos actualizado el post y corregido el código para el uso de una imagen en dispositivos con una pantalla de tamaño de 767px o menor 😉 ¡Un saludo y gracias por comentar!

      Responder

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *