使div的背景图像不断移动

这是我对我的body标签中的div的css :

.background {
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    position: absolute;
    display: block;
    background: url('Queens-University.jpg');
    background-repeat: no-repeat;
    background-size: 100px 150px;
    width: 100%;
    height: 100%;

    -webkit-filter: blur(3px);
    -moz-filter: blur(2px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(3px);
}

我试图以连续的方式(无限)将这个div的背景图像从左向右移动.

我试图使用jQuery这样做但没有发生任何事情,这是我的代码:

$(window).load(function() { 
    var image = $('.background');
    var x=0;
    setInterval(function(){
        image.css('background-position', x + 'px 0');
        x++;
    }, 10);
});

如何使用jQuery移动背景图像？我的功能出了什么问题？

我可以建议,在2015年底,另一种方式,只使用CSS.

@keyframes animatedBackground {
    from { background-position: 0 0; }
    to { background-position: 100% 0; }
}
#animate-area   { 
    width: 560px; 
    height: 400px; 
    background-image: url(bg-clouds.png);
    background-position: 0px 0px;
    background-repeat: repeat-x;
    animation: animatedBackground 40s linear infinite;
}

Src:https://davidwalsh.name/demo/background-animation-css.php