JSFiddle - React, Tailwind, and code Playground
HTML
<section id="home" data-speed="10" data-type="background">
<article>I am Absolute Positioned</article>
</section>
<section id="produtos" data-speed="4" data-type="background">
<article>I am Absolute Positioned</article>
</section>
<section id="empresa" data-speed="3" data-type="background">
<article>I am Absolute Positioned</article>
</section>
<section id="contato" data-speed="6" data-type="background">
<article>I am Absolute Positioned</article>
</section>
CSS
body{
margin: 0;
padding: 0;
}
#home, #produtos, #empresa, #contato{
width: 100%;
}
#home {
background: #FFCC00 url(http://www.alsite.com.br/setevoltas/imagens/firstBG.jpg) 50% 0 no-repeat fixed;
height: 1000px;
margin: 0 auto;
width: 100%;
max-width: 1920px;
position: relative;
}
#produtos {
background: #CC0000 url(http://www.alsite.com.br/setevoltas/imagens/secondBG.jpg) 50% 0 no-repeat fixed;
height: 1000px;
margin: 0 auto;
width: 100%;
max-width: 1920px;
position: relative;
}
#empresa {
background: #0CCFF1 url(http://www.alsite.com.br/setevoltas/imagens/firstBG.jpg) 50% 0 no-repeat fixed;
height: 1000px;
margin: 0 auto;
width: 100%;
max-width: 1920px;
position: relative;
}
#contato {
background: #A2B3C4 url(http://www.alsite.com.br/setevoltas/imagens/secondBG.jpg) 50% 0 no-repeat fixed;
height: 1000px;
margin: 0 auto;
width: 100%;
max-width: 1920px;
position: relative;
}
JavaScript
$window = $(window);
$('section[data-type="background"]').each(function(){
var $bgobj = $(this); // assigning the object
$(window).scroll(function() {
// Scroll the background at var speed
// the yPos is a negative value because we're scrolling it UP!
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 });
}); // window scroll Ends
});