JSFiddle - React, Tailwind, and code Playground

by Alma Grace

HTML

<section id="home" data-type="background" data-speed="10" class="pages">    
         <article>I am absolute positioned</article>
    </section>  
     
<section id="about" data-type="background" data-speed="10" class="pages">
         <article>ALMA GRACE</article>
</section>

CSS

#home {
  background: url(http://www.carlwozniak.com/clouds/Graphics/New%20Pix/clouds13.jpg) 50% 0 repeat fixed; min-height: 1000px;
  height: 1000px;
  margin: 0 auto;
  width: 100%;
  max-width: 1920px;
  position: relative;
}
 
#home article {
  height: 458px;
  position: absolute;
  text-align: center;
  top: 150px;
  width: 100%;
}
 
#about {
  background: url(http://eyesofodysseus.files.wordpress.com/2012/05/rain-run.jpg) 50% 0 repeat fixed; min-height: 1000px;
  height: 1000px;
  margin: 0 auto;
  width: 100%;
  max-width: 1920px;
  position: relative;
  -webkit-box-shadow: 0 0 50px rgba(0,0,0,0.8);
  box-shadow: 0 0 50px rgba(0,0,0,0.8);
}
 
#about article {
  height: 458px;
  position: absolute;
  text-align: center;
  top: 150px;
  width: 100%;
}

JavaScript

$(document).ready(function(){
    $('section[data-type="background"]').each(function(){
        var $bgobj = $(this); // assigning the object
     
        $(window).scroll(function() {
            var yPos = -($window.scrollTop() / $bgobj.data('speed'));
             
            // Put together our final background position
            var coords = '50% '+ yPos + 'px';
 
            // Move the background
            $bgobj.css({ backgroundPosition: coords });
        });
    });   
});