function parallax() { //Initialize Scroll var scroll = 0; //Browsers handle detection of the scroll point in different ways, this will locate the scroll position for many, but not all, browsers. if (navigator.appName == "Microsoft Internet Explorer") { scroll = document.body.scrollTop; }else{ scroll = window.pageYOffset; } //We must decide what percentage of apparent motion each background should show. var one = 0 - scroll * .20; var two = 0 - scroll * .40; //Then we must set the offset of each background to reflect that percentage. document.getElementById("parallax1").style.backgroundPosition = "0px " + one + "px"; document.getElementById("parallax2").style.backgroundPosition = "0px " + two + "px"; //Lastly, we need to do it all again, in this case every millisecond. (or at least it COULD be every millisecond) setTimeout("parallax()", 1); } // Squarespace makes it nigh on impossible to add an on_load event to any sensible element (like ) so we'll use jQuery to start our recursive function for us. $(document).ready(function(){ parallax(); });