JSFiddle - React, Tailwind, and code Playground

by Ritesh Kashyap

HTML

<div class="section" id="s1">
    <div class="content" id="c1">This is some content text for section one</div>
</div>
<div class="section" id="s2">
    <div class="content" id="c2">This is some content text for section two</div>
</div>
<div class="section" id="s3">
    <div class="content" id="c3">This is some content text for section three</div>
</div>
<div class="section" id="s4">
    <div class="content" id="c4">This is some content text for section four</div>
</div>
<div class="section" id="s5">
    <div class="content" id="c5">This is some content text for section five</div>
</div>

CSS

.section {        
    position:relative;
    z-index:1;
    height:600px;
    width:100%;
    background-attachment:fixed;    /* this keeps the background in place */
    background-size:100% 100%;
    background-repeat:no-repeat;
}
.content {
    position:relative;
    z-index:2;
    background-color:#fff;
    border:2px solid #666;    
    height:100%;    /* this height difference allows the bg to show through */    
}
.section#s1 {
    background-image: url(http://farm4.staticflickr.com/3290/3090990005_1177611ccb_o.jpg);   
}
.section#s2 {
    background-image: url(http://farm5.staticflickr.com/4135/4820238049_8e830ec494_b.jpg);
}
.section#s3 {    
    background-image: url(http://farm5.staticflickr.com/4015/4589449172_eb046a7f2a_b.jpg);
}
.section#s4 {    
    background-image: url(http://farm9.staticflickr.com/8109/8623081923_9cffafc4a7_h.jpg);
}
.section#s5 {    
    background-image: url(http://farm4.staticflickr.com/3073/3090985991_8d4b559d29_o.jpg);
}

JavaScript

/*

No JS is necessary, key is to have a 2-layer nested divs, and keep the bottom layer background-attachment 'fixed'

If images are not showing up then url may have changed, try plugging in your own image links

*/