simple parallax background
$(function(){
//cache the window object
var $window = $(window);
//parallax background effect
$('section[data-type="background"]').each(function(){
var $bgobj = $(this); //assign the object
$(window).scroll(function(){
//scroll the background @ var speed
// y negative because scrolling it up
var yPos = - ($window.scrollTop() / $bgobj.data('speed'));
//put together final background position
var coords = '50%' + yPos + 'px';
//move the background
$bgobj.css({backgroundPosition:coords});
});// end window scroll
});
});#hero {
background: url('../img/hero-bg.jpg') 50% 0 repeat fixed;
min-height: 500px;
position: relative;
display: table;
width: 100%;
padding: 40px 0;
color: white;
-webkit-font-smoothing: antialiased;
text-rendering: optimizelegibility;
}<section id="hero" data-type="background" data-speed="5">
</section>