Tecnología y Coaching para Emprendedores

Usa una Imagen Responsive a Pantalla Completa con CSS

imagen-responsive-backround

Seguro que has visto muchos sitios web actuales que utilizan una imagen que cubre la pantalla completa con indiferencia del dispositivo y la resolución. La imagen es 100% fluida, y se visualiza correctamente en todos los anchos de ventana de navegador. En este tutorial vamos a aprender a crear un sitio web que utilice una imagen responsive que ocupe el 100% de la pantalla:

imagen responsive a pantalla completa

Demo


Imagen Responsive a Pantalla Completa con CSS

Antes de ponernos manos a la obra, vamos a ver las bases de cómo vamos a hacer esto posible. La propiedad background-size de CSS permite el valor cover. Lo que hace cover es decirle al navegador que la imagen se escale siempre de manera automática y proporcional en base al viewport. Así, la imagen cambiará su alto y ancho de manera proporcional de modo que sea igual o más grande que el viewport.

Para evitar cargar una imagen de una resolución excesiva en dispositivos móviles, lo que haremos es usar los media queries de CSS3 para indicar que use una imagen diferente si el dispositivo es móvil. Esto permite usar una imagen de alta resolución para desktop, pues hay que tener en cuenta que hemos de servir a pantallas de 27 pulgadas como el iMac o incluso más grandes (TV multimedia y otros).

En este ejemplo se ha usado una imagen de 5500x3600px, lo que es enorme si pensáramos en un iPad o un iPhone, pero ideal para grandes pantallas. Otra opción es usar más media queries de CSS3 y hacer más saltos, y reservar esta imagen para dispositivos de alta resolución. Esto es algo opcional, pero importante cara al rendimiento web y en cualquier caso nunca utilizaría una imagen de 1,7Mb como la del ejemplo para móviles, así que como mínimo te recomiendo usar dos imágenes, una de alta resolución como esta y otra para dispositivos móviles.

Recuerda que no sólo hay que tener en cuenta la resolución del dispositivo, sino también la velocidad de la conexión a Internet del mismo. Con el diseño web móvil no es suficiente, hay que ir un paso más allá y pensar en generar una buena experiencia de usuario con tiempos de carga rápidos.


Tutorial paso a paso

Vamos a ver ahora cómo hacemos que la imagen ocupe todo el ancho del navegador. Lo primero de todo será crear nuestro código HTML:


<!doctype html>
<html>
   <body>
  ...Aquí tu contenido...
   </body>
</html>

No, no me he quedado contigo… o bueno, sí, me imagino tu cara, jaja. Fuera bromas, lo que sucede es que en el código HTML no necesitamos poner nada, ya que todo está en el CSS. Lo único que hará falta poner en el código HTML es el enlace a la hoja de estilos CSS donde daremos vida a nuestra imagen 100% responsive. Tal y como hemos visto, la regla de CSS más importante aquí va a ser esta:

background-size: cover;

Veamos ahora el código CSS:

body {
  /* Ubicación de la imagen */
  background-image: url(images/background-photo.jpg);

  /* Nos aseguramos que la imagen de fondo este centrada vertical y
    horizontalmente en todo momento */
  background-position: center center;

  /* La imagen de fondo no se repite */
  background-repeat: no-repeat;

  /* La imagen de fondo está fija en el viewport, de modo que no se mueva cuando
     la altura del contenido supere la altura de la imagen. */
  background-attachment: fixed;

  /* La imagen de fondo se reescala cuando se cambia el ancho de ventana
     del navegador */
  background-size: cover;

  /* Fijamos un color de fondo para que se muestre mientras se está
    cargando la imagen de fondo o si hay problemas para cargarla  */
  background-color: #464646;
}

Podemos reescribir este código en una sola línea y quedaría así:

body {
  background: url(background-photo.jpg) center center cover no-repeat fixed;
}

… ¿y por qué una imagen tan grande?

Quizás te haya parecido exagerado que usemos una imagen de 5500x3600px, pero hay una razón de ser, y esto es que en caso que el tamaño de la imagen sea menor que el ancho de ventana del navegador, lo que sucederá es que se expandirá y se verá pixelada:

imagen pixelada responsive

Cómo puedes imaginar, esto no es óptimo, de aquí que sea necesario usar una imagen de tanta resolución, así como los media queries de CSS3 para dispositivos móviles. En este ejemplo usamos una imagen distinta para dispositivos de 767px o menos, pero como comentaba, lo ideal sería usar al menos una tercera imagen y así optimizar el tiempo de carga y rendimiento web:

@media only screen and (max-width: 767px) {
  body {
    background-image: url(images/background-photo-mobile-devices.jpg);
  }
}

Para acabar…

Si te ha gustado el artículo, te animo a dejar un comentario. Si justo te inicias en el mundo del diseño web para móviles, te recomiendo mi curso de diseño web responsive. Y como siempre, será estupendo si compartes este artículo en tus redes sociales. Aquí te dejo el enlace para que puedas descargarte los archivos de la demo:

Descargar archivos

Fuente: Six Revisions

Un abrazo!


Comentarios

  • Vicent

    Como siempre muy buen tutorial. Código comentado, lo cual proporciona claridad y sencillez.

    Saludos Sandra.

  • Paco

    Buen tutorial Sandra, como siempre con detalle.

    Saludos.

  • Cristian

    Ten cuidado, un poco de html ha invadido tu css.

    • eSandra

      Solucionado, muchas gracias por avisar.

  • Guillem

    La demo ya tarda ocho años en cargar (por la imagen) 1.7 MB quizás estaría bien cargar la imagen en baja resolución y por encima que cargue la buena. Aún así depende de que tráfico vaya a gestionar puede ser un cuello de botella :) Voy adaptarlo para un caso que tengo! Animos

    • eSandra

      la imagen de 1,7Mb está pensada para dispositivos de alta resolución con conexión de banda ancha, como comento en el tutorial, hay que mirar alternativas para otros dispositivos :-)

  • Román

    ¡¡ Wow !!
    Excelente tutorial Sandra
    :-D
    Saludos

  • Fer

    Muchas gracias por este tutorial Sandra y por tu tiempo dedicado en él.

    Me ha surgido un problemilla que no sé si a alguien más le ha pasado…

    El caso es que en todos los navegadores se ve correctamente, pero a la hora de visualizarlo en el móvil y con el navegador Chrome, la imagen no se posiciona bien. La imagen se ve cortada como si estuviera colocada por encima del punto X=0 e Y=0. Ya que si en la propiedad background-position pongo esos valores (background-position: 0 0;) La imagen se ve perfectamente ajustada al ancho y alto del navegador Chrome, pero en el resto de navegadores se ve descentrada ya que no re-escala la imagen como hace Chrome.

    No sé si me he explicado bien…

    Un saludo!
    Y gracias de antemano!

    • admin

      Hola, Fer, para estos temas mejor contactamos por correo!
      Saludos cordiales!

    • Pedro

      Hola Fer, la respuesta seguro que llega tarde pero..

      Pon en tu hoja de estilo

      html {
      height:100%;
      width:100%;
      }

      Funciona en todos los dipositivos.

  • Johan

    Buen aporte, me sirvio demasiado. muchas gracias

    • Sandra

      Me alegro, jeje

  • JAVIER

    Muchas gracias por este sencillo tutorial. Ya lo he puesto en práctica y va perfecto.

    • eSandra

      Estupendo, me alegro mucho!

  • Eduardo

    Muy bueno, muchas gracias, es una información muy valiosa.

    • eSandra

      De nada, Eduardo, un placer compartir mis conocimientos:-)

  • Diana

    Me ha sido muy util muchas gracias

  • Edwing Ovalle

    Excelente como siempre Sandra! muchas gracias! un abrazo!

    • eSandra

      De nada, Edwing, un abrazo!

  • R.López

    Gracias por el tiempo empleado en el tutorial, me ha resultado muy útil.

    • eSandra

      De nada, me alegro te haya servido

  • Erick Ipanaque

    Me parece excelente tu tutorial, pero tengo problemas con el tamaño, mi background-image, tengo varias imagenes divididas en secciones, y solo ocupan el tamaño de lo que contienen, si no tienen nada apenas y se ve la imagen, ayudame :(, uso bootstrap

  • Logeate

    Gracias!!!

  • ppmiart

    Muy buen tutorial Sandrá, rápido y muy bien explicado. En breve voy a comenzar un proyecto web y me ha venido muy bien. Gracias por tu tiempo y por compartir tus conocimientos. Saludos.

    • eSandra

      De nada, me alegro te haya ayudado :-)

  • Luis

    Muchas gracias por el tutorial, simple, claro y funcional, muy buen aporte.

  • Juan Zumárraga

    Muchas gracias por el aporte, me ha servido mucho.

    • eSandra

      Me alegro, Juan

  • Ezequiel

    Está bueno el tutorial. Lo que no me queda claro es que por ej yo tengo una sola imagen de 1170px de ancho practicamente, y lo que quiero es que al achicar el navegador no solo se ajuste al ancho del navegador achicado o de un celular, sino que tampoco se RECORTE, porque en la foto hay una enfermera, y si bien se ajusta al ancho del navegador me la va recortando y la cara va desapareciendo. Voy a ver si con tu ejemplo puedo lograr eso, y si tenes alguna pista para darme te lo agradecería. Saludos.

  • Karen

    Muchísimas gracias !! Hice algunas modificaciones para adaptarlo a un , y quedó espectacular.