several divs with overlapping background

Question

several divs with overlapping background

Navigation

#1 by (1 votes)

0

I'm trying to make a background for a header that with a parallax effect in multiple layers of backgrounds creates a 3d effect. The problem is that the div where the layer is located never has a height greater than 0 pixels, so you never see the background.

This is what I have in the 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>

And this in the 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%;
}

Does anyone know what I'm doing wrong?

thanks

html css

asked by Tryhan Ternoc 10.11.2018 в 03:54

source

1 answer

JavaScript: How can I add the numerical elements inside a json? like traversing an array and replacing or deleting elements in javascript

score 1 · Accepted Answer

Each element should only have 1 id

If the id is repeated, it must be a class

In your html parallax and the name of the layer have the attribute id. In your css they have . as if they were classes

If you have a class that shares several elements, you can put in it the properties that you share. It is not necessary to repeat the class they have only.

if an element is absolute height: 100%; it will take the height of the parent

Do not forget top, left, bottom, right when there are items position: absolute

Therefore it would be something like this:

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%;
}