JSFiddle - React, Tailwind, and code Playground

HTML

<div class="page-wrap">
    <div id="content">
        <p>This is my content.</p>
    </div>
</div>

<div class="site-footer">
    <p>Footer is NOT overlayed over the image</p>
</div>

CSS

* {
	margin: 0;
    padding: 0;
}

html, body {
	height: 100%;
}

html{
    background: url(http://i.imgur.com/fJYziTr.jpg) no-repeat 0 0 fixed;
    -webkit-background-size: cover;    
   -moz-background-size: cover; 
   -o-background-size: cover;
   background-size: cover;
}

body {
  width: 100%;
  height: 100%;
  font-family: Tahoma, Geneva, Arial;
  font-size: 14px;
}
#content {
  width: 1000px;
  height: 500px;
  margin: auto;
  background-color: #000;
  background-color: rgba(0,0,0,0.75);
  color: #FFF;
  text-align: justify;
}
.page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -142px; 
}
.page-wrap:after {
  content: "";
  display: block;
}
.site-footer, .page-wrap:after {
  /* .push must be the same height as footer */
  height: 142px; 
}
.site-footer {
  background: orange;
  z-index: 999;
  height: 142px;
}