Content Scrolls over image


So I have an image which isn't set as the background, but takes up the entire width and almost all of the height. I want this image to remain in it's position and as the user scrolls, the content below scrolls over the top of the image.

I tried using:

position: fixed;
z-index: -1; /* Or another value */

but neither or together worked.

What I have without the position or z-index applied:

I want the div container to appear under the image and only overlap the image when the user scrolls.

To overlap the container below only when the user scrolls down, you'll need to set a padding-top value, to your parent .container, equal to or less than the height of the fixed image in question.
Then apply your background colour to the nested div element instead.

body {
  padding: 0;
  margin: 0;
  background-color: #f7f7f7;
  overflow-x: hidden;

/* Images */
#head-banner-img {
  border-bottom: 5px solid #222222;
  position: fixed;

/* Container Content */
.container {
    width: 100%;
    height: 500px;
    background-color: transparent;
    padding-top: 947px;
    font-size: 30px;
    text-align: center;
    position: relative;

.container > div {
    background: #2c2c2c;
    height: 100%;
    padding: 50px;
    box-sizing: border-box;
    color: white;
<img src="" alt="Munch Banner" id="head-banner-img">
    <div class="container">