How can I hide part of this image behind other elements?

I have a hero image with layers and a parallax effect on a couple of the layers as the user scrolls down, and I want the image to be hidden below my navbar, but currently the image is viewable behind all of my content when I just need it for the top portion of the page. I have tried using z-index but to no avail. Currently, this is what it looks like current view :

but I need the image to cut off after the nav and display the background color of the page. Here's my relevant css

#hero {
  height: 1000px;
  overflow: hidden;
  position: relative;
}


/* styling repeating layer of classes */
.layer {
  background-position: bottom center;
  background-size: auto;
  background-repeat: no-repeat;
  width: 100%;
  height: 800px;
  position: fixed;
  z-index: -1;
}

body, html {
height: 100%;
margin: 0;
}

/*Navbar styling */
#navbar {
    overflow: hidden;
    background-color: #130D0A;
    z-index: 9;
    text-align:center;
  }

 /* sticking nav to top of page */
.sticky {
position: fixed;
top: 0;
width: 100%;
}