Background panning after keydown effect

Something is wrong with the method I'm using to re-create the effect of JSFiddle link

I want the background to move by 10 pixels in the direction of the keydown, and to keep moving in a loop as the key is pressed or held again. I know the code below does not look at the "key held down" factor - can anyone help me implement this part?

The effect should work on the x and y axis and should be possible also on the diagonal.

Follow the code:

HTML

<div id="pageBg"></div>

CSS

#pageBg {
background: url('http://placekitten.com/2000/2000') repeat 0 0 fixed;
height: 600px;
left: 0;
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
}

JAVASCRIPT

var xPos = "background-position-x";
var yPos = "background-position-y";

window.addEventListener('keydown', function (e) {
    if (e.keyCode == 37) { //Left Arrow Key
            $('#pageBg').css(xPos, $('#pageBg').css(xPos) -10 + 'px');
    }
    if (e.keyCode == 38) { //Up Arrow Key
            $('#pageBg').css(yPos, $('#pageBg').css(yPos) -10 + 'px');
    }
    if (e.keyCode == 39) { //Right Arrow Key
            $('#pageBg').css(xPos, $('#pageBg').css(xPos) +10 + 'px');
    }
    if (e.keyCode == 40) { //Down Arrow Key
            $('#pageBg').css(yPos, $('#pageBg').css(yPos) +10 + 'px');
    }
});