.box1 
  %span.title Normal
.box2 
  %span.title 1/2 Speed Parallax
.box3 
  %span.title 1/4 Speed Parallax
.box4 
  %span.title Fixed Position
%h1 
  Scrolling Background-Image Parallax

@import url(https://fonts.googleapis.com/css?family=Bowlby+One+SC);

body{
background-image: linear-gradient(#9b59b6, #8E44AD 500px);
  font-family: "Bowlby One SC", sans-serif;
  color: #333;
}
div{
height: 3000px;
width: 20%;
margin: 2.5%;
float: left;
background: white;
  background-image: linear-gradient(#ECF0F1 50%, #bdc3c7 50%);
  background-size: 50px 50px;
  font-size: 20px;
  box-sizing: border-box;
  text-align: center;
  font-weight: bold;
  position: relative;
}

.box4{
  background-attachment: fixed;
  background-position: 0 26px;
}
h1 {
  position: fixed;
  bottom: 0px;
  width:100%;
  text-align: center;
  background: #F1C40F;
  padding: .5em 1em;
  box-sizing: border-box;
}
span { 
  display: block;
  position: fixed;
  width: 20%;
  box-sizing: border-box;
  padding: 3px 10px;
}

// The function
var background_image_parallax = function($object, multiplier){
  multiplier = typeof multiplier !== 'undefined' ? multiplier : 0.5;
	multiplier = 1 - multiplier;
  var $doc = $(document);
  $object.css({"background-attatchment" : "fixed"});
	$(window).scroll(function(){
	  var from_top = $doc.scrollTop(),
	      bg_css = '0px ' +(multiplier * from_top) + 'px';
	  $object.css({"background-position" : bg_css });
  });
};

//Just pass the jQuery object
background_image_parallax($(".box2"));

//optional second value for speed
background_image_parallax($(".box3"), 0.25);