JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
    <div id="main-content"></div>
    <div id="main-background">
        <img src="http://clickalifecoachblog.com/wp-content/uploads/2015/01/Child-Girl-Bear-Toy-Autumn-Leaves-Nature-Photo-HD-Wallpaper.jpg">
    </div>
</div>
    
<div id="footer">
    <div id="footer-inner"></div>
</div>

CSS

*{
    margin: 0;
    padding: 0;
    border: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


#main{
    position: relative;
    background: #749B35;
    margin-bottom: 70px;
    height: 800px;
    overflow: hidden;
    z-index: 10;
}


#main-background{
    position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	min-width: 100%;
	height: 100%;
	min-height: 100%;
	overflow: hidden;
	z-index: 0;
}
#main-background > img{
	position: absolute;
	left: 0;
	top: 0;
	width: 1200;
	z-index: 0;
}


#footer{
    position: relative;
}
#footer-inner{
    position: fixed;
    background: #E76144;
    bottom: 0;
    width: 100%;
    height: 70px;
    z-index: 0;
}