jQuery change css background when y-axis scroll reaches a certain depth <p>After scrolling down 600px, I would like a css background-image to appear from no image to a decided background-image (image 1); however, above 600px, I would like to change to another image (image 2). I want this action to repeat itself without having to refresh the page, as well.</p> <p>Here is my code:</p> <p>jQuery:</p> <pre><code>$(window).scroll(function() { var y_scroll_pos = window.pageYOffset; var scroll_pos_test = 800; // set to whatever you want it to be if(y_scroll_pos &gt; scroll_pos_test) { $("square").css("background-image", "url(images/comp_rel/square.png)"); } else { $("square").css("background-image","url(images/comp_rel/Box.gif)"); } }); </code></pre> <p>I know I'm missing something simple, I just can't figure it out. Any thoughts? Thanks.</p>