Minimalist Background Parallax Scrolling Effect with jQuery

Just another jQuery & CSS solution to implement a simple background image parallax effect as you scroll down the web page.

How to use it:

1. Create a DIV elements for the parallax image.

<div class="bg"></div>

2. The needed CSS styles to add an background image into the DIV element and make its background position is fixed.

.bg {
  background: url("Path to your image") repeat;
  position: fixed;
  width: 100%;
  height: 200%;
  top: 0;
  left: 0;
  z-index: -1;
}

3. Include the latest version of jQuery library at the bottom of your parallax scrolling website.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

4. Enable the background parallax scrolling effect using a little Javascript (jQuery) magic.

$(window).scroll(function(e){
  parallax();
});

function parallax(){
  var scrolled = $(window).scrollTop();
  $('.bg').css('top',-(scrolled*0.1)+'px');
}

---

This awesome jQuery plugin is developed by ScottMarshall. For more Advanced Usages, please check the demo page or visit the official website.