Hi there! I have a background image I want to change position when I press the arrow keys. I want the background to move 16 pixels for every press in the direction I indicate. I can't get this to work, however. I have jquery installed, as well as the background-position plugin. Here's my code:
$(document).ready(function() { function checkKey(e){ switch (e.keyCode) { case 40: var curX = parseInt($(".test").css("top")); $(".test").css("top", curX += 16); // move background $("#background").css('backgroundPosition', bgCurX -= 16); break; case 38: var curX = parseInt($(".test").css("top")); $(".test").css("top", curX -= 16); // move background var bgCurX = parseInt($("#background").css("top")); $("#background").css("top", bgCurX += 16); break; case 37: var curX = parseInt($(".test").css("left")); $(".test").css("left", curX -= 16); // move background var bgCurX = parseInt($("#background").css("left")); $("#background").css("left", bgCurX += 16); break; case 39: var curX = parseInt($(".test").css("left")); $(".test").css("left", curX += 16); // move background var bgCurX = parseInt($("#background").css("left")); $("#background").css("left", bgCurX -= 16); break; default: } } if ($.browser.mozilla) { $(document).keypress (checkKey); } else { $(document).keydown (checkKey); } }); CSS: #background {height:600px;width:1000px;border:1px solid #999;background-image:url("earthbound-bg.gif");background-repeat:no- repeat;} On the site, I have it so divs move when I press the arrow keys. That works, but the background doesn't. :( Any help would be appreciated! Thanks!