Estoy intentando hacer un fondo para un header que con un effecto de parallax en multiples capas de backgrounds cree un efecto de 3d. El problema es que el div donde se encuentra la capa nunca tiene una altura mayor de 0 pixeles, por lo que nunca se ve el background.
Esto es lo que tengo en el html:
<header id="hero">
<div id="parallax layer_1_header"></div>
<div id="parallax layer_2_header"></div>
<div id="parallax layer_3_header"></div>
</header>
Y esto en el css:
#hero{
background: linear-gradient(black 0%,#1c312f 65%);
height: 850px;
}
.layer_1_header, .layer_2_header, .layer_3_header{
position:absolute;
}
.layer_1_header{
background: url(../img/mountain.png)bottom/cover no-repeat;
width:120%;height:850px;margin:-10% 0 0 -10%;
}
¿Alguien sabe que estoy haciendo mal?
gracias
id="parallax layer_1_header"
? Para múltiples valores prueba utilizarclass