martes, 14 de febrero de 2017

Fixed Position Background Image

Referencia



Idea

La imagen de fondo permanece en una posición fija mientras el resto del contenido se puede deslizar sobre ella.

La imagen va como background en un contenedor.

position: fixed permite fijar la imagen, pero el resto del contenido pasa por detrás en lugar de por delante.
Nota: Si se le da un opacity explícito < 1 el contenido sí pasa por delante... pero si es opacity: 1 ya no... por qué será?

El truco se logra con background-attchment: fixed.

Demo