Top Layer (Flags)	Layer 2 (Bird)	Layer 3 (Title)	Background (Forest)
1123 x 234	837 x 312	700 x 265	1440 x 900

<style type="text/css">
#parallax {
 width: 900px;
 height: 320px;
 position: relative;
 overflow: hidden;
 margin: 0 auto;
}
#parallax .layer, #parallax img { position: absolute; }
</style>

<div id="parallax">

 <div class="layer" style="width: 900px; height: 200px;"><!-- Background - actual size: 1440 x 900 -->
  <img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/sky.jpg" alt="" style="top: -450px; left: -100px;"/>
 </div>

 <div class="layer" style="width: 700px; height: 265px;"><!-- Layer 3 - actual size: 700 x 265 -->
  <img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/title.png" alt="" style="top: -10px; left: 0;" />
 </div>

 <div class="layer" style="width: 920px; height: 274px;"><!-- Layer 2 - actual size: 837 x 312 -->
  <img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/birds.gif" alt="" style="top: 0; left: 200px;" />
 </div>

 <div class="layer" style="width: 1123px; height: 234px;"><!-- Top Layer - actual size: 1123 x 234 -->
  <img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/flags.gif" alt="" style="top: -150px; left: 20px;"/>
 </div>

</div>

<script type="text/javascript" src="http://www.axiomfiles.com/Files/258012/jqueryjparallax.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $('#parallax .layer').parallax();
});
</script>

• The CSS
  
  
  
  • The size of your banner is set in the CSS, in this case the size is 900 x 320 pixels.
  
  
  • The banner is center in this case using "margin: 0 auto;", remove this if you don't want it centered.
  
  
  • I think it might be best to add this CSS to the Custom CSS because when I added it to the banner area with the HTML, it was ignored at times.


• Each Image
  
  
  
  • Note that the order of the images in the HTML starts with the background image then each image after it becomes a layer above ( I hope that makes sense ).
  • There is no set limit on how many images you can add into the parallax window, but follow this template when you add more:
    
     <div style="width: 920px; height: 274px;">
      <img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/birds.gif" alt="" style="top: 0; left: 200px;" />
     </div>
  
  
  • The width and height (in red) were adjusted to get the desired amount of scrolling inside the parallax window; the closer this height and width are to the banner the less scrolling you'll get.
  
  
  • I've left in the actual image size (in the code above, in green) so you can see the difference in size from the window size
  
  
  • The image URL is in orange.
  
  
  • The top and left parameters (also in red) adjust the starting position of the image inside the parallax window. These parameters are also adjusted to get the desired effect.


• The Script
  
  
  
  • Add the javascript into your banner or footer HTML.