Saltar al contenido

Imagen Responsive Pantalla Completa con CSS: Ejemplos

6 mayo, 2017
Imagen Responsive Pantalla Completa con CSS: Ejemplos
4.6 (92%) 5 votes

Imagen Responsive Pantalla Completa. El objetivo de este artículo es que una imagen de fondo en un sitio web se muestre en toda la ventana del navegador en todo momento, sin embargo, esta no debe moverse, debe estar de manera estática. Vamos a poner algunos detalles sobre este requerimiento y que se ha visto en otros sitios web:

  • Llena la página entera con imagen de fondo, sin espacio en blanco.
  • Conserva las proporciones de la imagen (relación de aspecto), dependiendo de la ventana.
  • La imagen está centrada en la página y el contenido se desplaza.
  • No causa barras de desplazamiento en absoluto.

En algunas páginas de turismo o de veterinarias suelen colocar una imagen de fondo para llamar la atención de sus potenciales clientes. Los sitios actuales que utilizan una imagen que impacta la pantalla completa no dependa del dispositivo y la resolución del mismo. El fondo de imagen es 100% expandida en la pantalla, y se visualiza correctamente en todos los anchos y altos de ventana de navegador.

Imagen Responsive Pantalla Completa
Imagen Responsive Pantalla Completa
Ver Demo

Imagen Responsive Pantalla Completa con CSS: Ejemplos

Ejemplo #01 Fondo responsiva

Ejemplo #02 Fondo responsiva

Ejemplo #03 Fondo responsiva completo

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:

Lo único que hará falta poner en el código HTML es la vinculacion logica con CSS donde mostraremos la imagen 100% responsive. Las reglas de CSS más importante son estas:

Para Moviles lo tenemos aqui

Imagen Responsive Pantalla Completa con CSS Ejemplos
Imagen Responsive Pantalla Completa con CSS Ejemplos

Para terminar…

Si te ha gustado el artículo, te animo a dejar un comentario.  Aquí te dejo el enlace para que puedas descargarte los archivos de este post:

Descargar Código Fuente

Fuente:  sixrevisions