Here's the css I have for a div located in my `body` tag :

```
.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);
}

```

I am trying to move the background image of this div move from left to right in a continuous manner (infinite).

I am trying to do this using jQuery but nothing is happening, here is my code:

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

```

How can I use the jQuery to move the background-image? What is wrong with my function?
['https://Stackoverflow.com/questions/34364330', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/4333347/']
I've rewritten your jQuery script into plain vanilla javascript and it seems to work fine:

```js
function slideBackground() {

var background = document.getElementsByClassName('background')[0];
var x = 0;

setInterval(function(){
    background.style.backgroundPosition = x + 'px 0';
    x++;
    }, 10);

}

window.addEventListener('load',slideBackground,false);
```

```css
.background {
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    position: absolute;
    display: block;
    background: url('http://bit.ly/1NCb5xC');
    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);
}
```

```html
<div class="background">

</div>
```
The more jQuery'ish way of doing it, would be to write a plugin that animates the background

```
$.fn.animateBG = function(x, y, speed, callback) {
    var pos = this.css('background-position').split(' ');
    this.x  = pos[0] ? +pos[0].replace(/\D/g,'') : 0,
    this.y  = pos[1] ? +pos[1].replace(/\D/g,'') : 0,

    $.Animation( this, {
        x: x,
        y: y
    }, { 
        duration: speed
    }).progress(function(e) {
        this.css('background-position', e.tweens[0].now+'px '+e.tweens[1].now+'px');
    }).done(callback);

    return this;
};

```

And then just use it in a recursive function for infinite animation

```
(function recursive() {
    $('.background').animateBG(100, 0, 1000, function() {
        this.animateBG(0, 0, 1000, recursive);
    });
}());

```

[**FIDDLE**](https://jsfiddle.net/adeneo/dzaxsg6f/1/)