Place transparent div-layer above another div-layer with 100% height (with sticky footer!)?

Question

HTML:

<div id="mainWrapper">
    <div id="headerContainer">Header</div>
        <div class="contentPage">
            <div id="content">
                      <p>Content Page</p>
                      <p>Content Page</p>
             </div>
        </div>
    <div id="footerContainer">Footer</div>
</div>

CSS:

body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#mainWrapper {
  margin: 0 auto;
  min-height: 100%;
  position: relative;
  width: 100%;
  background: red;
}

#headerContainer {
  background: none repeat scroll 0 0 #4ED0AA;
  height: auto;
  width: 100%;
}

.contentPage {
  background: url("http://www.sammt.net/Baum.jpg") repeat-y scroll 0 0 / 100% auto rgba(0, 0, 0, 0);
  padding-bottom: 120px;
  width: 100%;
}

#content {
  background: none repeat scroll 0 0 #6288A1;
  opacity: 0.8;
  padding: 20px 20%;
}

#footerContainer {
  background-color: #4ED0AA;
  bottom: 0;
  height: 120px;
  position: absolute;
  width: 100%;
}

Result:

What should happen: The layer with the background-image as well as the layer with the blue transparent background should go until the footer begins. The problem is the sticky footer I think...

Looks like that:

Answer 1

Here is a demo of the page with just two paragraphs, and another demo with plenty of content to scroll.

I've done a little rearrangement of the layout, so it looks like this now:

<div id="transparent-bg"></div>

<div id="mainWrapper">
    <div id="headerContainer">Header</div>

    <div class="contentPage">

        <div id="content">
            <p>Content Page</p>
            <p>Content Page</p>
        </div>
    </div>
</div>
<div id="footerContainer">
    Footer
</div>

Basically, the background image and the transparent color are being presented in a separate div because it was causing some presentational issues, and the footer has become a sibling after the mainWrapper.

The CSS code is as follows:

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

#transparent-bg {
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:auto;
  background: url("http://www.sammt.net/Baum.jpg") no-repeat;
  background-size:cover;
  z-index:-1;
}

#transparent-bg:after {
  background:#6288A1;
  opacity:.8;
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  content:'';
}

#mainWrapper {
  margin: 0 auto -120px;
  width: 100%;
  min-height:100%;
  height: auto !important;
}

#headerContainer {
  background: #4ED0AA;
  height: auto;
  width: 100%;
}

.contentPage {  
  width: 100%;
  margin: 0 auto -120px;
}

#content {
  padding: 20px 20% 120px;
  box-sizing: border-box;
}

#footerContainer {
  background-color: #4ED0AA;
  height: 120px;
  width: 100%;
}

I hope this solves your problem!