Seguramente has visto webs con una imagen de fondo que inicialmente ocupa todo el espacio del navegador (alto y ancho). Al hacer scroll se ve el resto del contenido de la página, ya sea texto, otras imágenes, una mezcla de ambos, etc.

El efecto visual recuerda a una revista. Primero se te presenta la portada y al pasar página ves los contenidos. En este caso ‘pasar página’ equivale a hacer scroll.

Es un recurso muy útil si estás diseñando una web para una revista digital, moda, un microsite, o en general cuando necesitas enfatizar el contenido inicial de una web.

La imagen de fondo que utilices se ajustará perfectamente a cualquier tipo de pantalla o dispositivo.

La clave está en el uso de la propiedad CSS background-size: cover, combinada con otras propiedades como height: 100% en el body.La compatibilidad de este recurso es muy buena en navegadores modernos.

Te dejo un CodePen de ejemplo muy básico para que le saques partido. Espero que te sea útil.

 

See the Pen Full height background image by Tonalidad (@tonalidad) on CodePen.

 

 

Share:Tweet about this on TwitterShare on FacebookShare on Google+