Source: http://www.esandra.com/usa-una-imagen-responsive-a-pantalla-completa/
Timestamp: 2016-12-03 23:54:41+00:00

Document:
BlogCursos OnlineLibroContacto	Usa una Imagen Responsive a Pantalla Completa con CSS
Gracias por compartir:Twitter0Google+43Facebook0LinkedIn94Seguro 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 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.
...Aquí tu contenido...
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:
Veamos ahora el código CSS:
/* Nos aseguramos que la imagen de fondo este centrada vertical y
horizontalmente en todo momento */
/* La imagen de fondo no se repite */
/* 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. */
/* La imagen de fondo se reescala cuando se cambia el ancho de ventana
/* Fijamos un color de fondo para que se muestre mientras se está
cargando la imagen de fondo o si hay problemas para cargarla  */
Podemos reescribir este código en una sola línea y quedaría así:
… ¿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:
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:
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:
Fuente: Six Revisions Un abrazo!
Gracias por compartir:Twitter0Google+43Facebook0LinkedIn94
Como siempre muy buen tutorial. Código comentado, lo cual proporciona claridad y sencillez.
Buen tutorial Sandra, como siempre con detalle.
Ten cuidado, un poco de html ha invadido tu css.
Solucionado, muchas gracias por avisar.
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
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 :-)
Excelente tutorial Sandra
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.
Hola, Fer, para estos temas mejor contactamos por correo!
Hola Fer, la respuesta seguro que llega tarde pero..
Pon en tu hoja de estilo
Funciona en todos los dipositivos.
Buen aporte, me sirvio demasiado. muchas gracias
Muchas gracias por este sencillo tutorial. Ya lo he puesto en práctica y va perfecto.
Muy bueno, muchas gracias, es una información muy valiosa.
De nada, Eduardo, un placer compartir mis conocimientos:-)
Me ha sido muy util muchas gracias
Excelente como siempre Sandra! muchas gracias! un abrazo!
De nada, Edwing, un abrazo!
Gracias por el tiempo empleado en el tutorial, me ha resultado muy útil.
De nada, me alegro te haya servido
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
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.
De nada, me alegro te haya ayudado :-)
Muchas gracias por el tutorial, simple, claro y funcional, muy buen aporte.
Juan Zumárraga
Muchas gracias por el aporte, me ha servido mucho.
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.
Muchísimas gracias !! Hice algunas modificaciones para adaptarlo a un , y quedó espectacular.

References: resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución