JSFiddle - React, Tailwind, and code Playground

HTML

<div class="l-main">
    <div class="l-header">
        header      
    </div>    
    <div class="l-content">
       content
       <p>gggggg</p>
       <p>gggggg</p>
    </div>
</div>
<div class="l-footer">
    footer   
</div>

CSS

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

body {
     background: #ddd url(http://www.salon-kristyle.ru/wp-content/themes/salon-kristyle.ru/img/maneBg.jpg) no-repeat fixed;
    background-size: cover;
}

.l-main {
    min-height: 100%;       
    margin: 0 0 -70px;
    overflow: hidden;
    background: rgba(0,0,0,0.6);
   
}

.l-main:after {
    content: '';
    display: block;
    height: 70px;
}

.l-header {
    position: relative;
    height: 100px;
    color: #fff;
}

.l-header:after {
    content: '';
    position: absolute; top: 100%;
    width: 100%; height: 50px;
    background: #ddd url(http://www.salon-kristyle.ru/wp-content/themes/salon-kristyle.ru/img/maneBg.jpg) no-repeat fixed;
    background-size: cover;
}

.l-content {    
    position: relative;
    z-index: 1;
    margin-top: 50px;   
    color: #fff;
}

.l-footer {
    height: 70px;    
    position: relative;
    z-index: 1;    
    color: #fff;
}