How to place an image beneath a semi-transparent layer?

I know this has been asked before but I can't find a solution that works!

My site contains a green background with a form in the center of it. You can view the jsFiddle here I simply want the image found here to be placed beneath the green layer you see. The image shouldn't be stretched - just simply fill the green layer with like 50% opacity.

The code that produces the green layer currently is:

#mainarea {

 height:900px;
  background: #2ecc71 no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  font-family: "Roboto";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
#mainarea::before {
  z-index: -1;
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  background: white;
  /* IE Fallback */
  background: white;
    width: 100%;
  height: 100%;
}

Thanks for your help!