How to hide a semi transparent div behind another when scrolling

I’ve got two divs with different semi transparent background colours but they share the same background image. When I scroll up I’m trying to get the background image to scroll but also for the lower div to disappear behind the first (fixed) div.

jsfiddle:
https://jsfiddle.net/jollyoli/8yamuegh/12/

<body>

<div id="nav">
    Navbar
 </div>
   
<div id="content">
 Content
 </div>

</body>
body {
    margin: 0;
    background-image: url("https://i.ibb.co/PDrJKf7/chrissa-giannakoudi-0-QRZk-Whfc-A4-unsplash.jpg");
    background-size: 100% auto;
 }
 
 #nav {
    top: 0;
    position: fixed;
    height: 60px;
    width: 100%;
    background-color: rgba(153, 50, 204, 0.7);
    z-index:1;
 }
 
 #content {
    position: relative;
    top: 60px;
    height: 2000px;
    width: 100%;
    background-color: rgba(176, 224, 230, 0.7);
 }

Is there a way to make both the text AND the background colour fade so it appears they are disappearing behind the top div? Or is there another way to arrange the layers or use z-index values that maintains the background image? Anything I try only gets part of the effect.

Thanks.

7 thoughts on “How to hide a semi transparent div behind another when scrolling”

Leave a Comment