For divs - .yellow & .blue

Demo by my own    Demo original   Script jquery.parallax-0.2.js   Script jquery.parallax-0.2-min.js

HTML

<div class="yellow">
	<div class="center">
		<div class="blue">
		</div><!--blue -->
	</div><!--center -->
</div><!--yellow -->

CSS

#main .yellow {
	background: transparent url('../img/mainbackyellow.png') 0 0 no-repeat;
}
#main .center {
	background: transparent url('../img/mainbackcenter.png') 0 0 no-repeat;
}
#main .blue {
	background: transparent url('../img/mainbackcblue.png') 0 0 no-repeat;
	height: 750px;
}

JAVASCRIPT

<script type="text/javascript">
	  $('body').parallax({
      'elements': [
        {
          'selector': 'div.yellow',
          'properties': {
            'x': {
              'background-position-x': {
                'initial': 0,
                'multiplier': 0.1,
                'invert': true
              }
            },
	      'y': {
              'background-position-y': {
                'initial': 0,
                'multiplier': 0.1,
                'invert': true
              }
            }
          }
        },
        
        {
          'selector': 'div.blue',
          'properties': {
            'x': {
              'background-position-x': {
                'initial': 0,
                'multiplier': 0.3
              }
            },
	      'y': {
              'background-position-y': {
                'initial': 0,
                'multiplier': 0.3
              }
            }
	 }
        }
      ]
    });
</script>