Rabner Casandara Rabner Casandara - 1 month ago 24
CSS Question

Parallax Effect Issue While Scrolling

I want an image to fit a container element but my code is only showing half of the image, without the desired parallax effect. Can anyone explain why it isn't displaying the full image?



* {
margin: 0;
padding: 0;
}
.top_nav {
height: 80px;
width: 100%;
background: rgba(0, 0, 0, .5);
position: absolute;
}
.container {
height: 400px;
width: 100%;
max-width: 100%;
overflow: hidden;
background-image: url("http://cdn.pcwallart.com/images/beautiful-nature-animals-wallpaper-3.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
z-index: -1;
}
.details {
height: 638px;
width: 100%;
background-color: #00e5de;
}

<header>
<div class="top_nav">

</div>
</header>
<div class="container">
<div id="short-des">

</div>
</div>
<div class=details>
</div>





enter image description here

Answer

Use 100vh for your .container height

* {
  margin: 0;
  padding: 0;
}
.top_nav {
  height: 80px;
  width: 100%;
  background: rgba(0, 0, 0, .5);
  position: absolute;
}
.container {
  height: 100vh;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  background-image: url("http://cdn.pcwallart.com/images/beautiful-nature-animals-wallpaper-3.jpg");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1;
}
.details {
  height: 638px;
  width: 100%;
  background-color: #00e5de;
}
<header>
  <div class="top_nav">

  </div>
</header>
<div class="container">
  <div id="short-des">

  </div>
</div>
<div class=details>
</div>

vh: hundredths of the viewport height.