0

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

1
  • ¿id="parallax layer_1_header"? Para múltiples valores prueba utilizar class
    – enxaneta
    Commented el 10 nov. 2018 a las 8:57

1 respuesta 1

1
  1. Cada elemento solo debe tener 1 id
  2. Si la id se repite, debe ser un clase
  3. En tu html parallax y el nombre del layer tienen el atributo id. En tu css tienen .como si fueran clases
  4. si tiene una clase que comparten varios elementos, puedes poner en ella las propiedades que comparten. No es necesario repetir la clase que tienen unica.
  5. si un elemento es absoluto height: 100%; lo hará tomar la altura del parent
  6. No olvides top, left,bottom, right cuando hay elementos position: absolute

Por lo tanto quedaría algo asi:

HTML

<header id="hero">
  <div class="parallax layer_1_header"></div>
  <div class="parallax layer_2_header"></div>
  <div class="parallax layer_3_header"></div>
</header>

CSS

#hero {
    background: linear-gradient(black 0%, #1c312f 65%);
    height: 850px;
}
.parallax {
    position: absolute;
    top: 0;
    left: 0;
}

.layer_1_header {
    background: url('https://picsum.photos/1000')bottom/cover no-repeat;
    width: 120%;
    height: 100%;
    margin: -10% 0 0 -10%;
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.