Question

Ok, so I am trying to animated a DIV elements background-image with use of jQuery the background is a cloud which I would like to loop over and over in a slow like moving pattern. Any idea how I can do this?

I tried this code but no luck so not sure whats wrong.

$(document).ready(function() {

    $(function() {
    $.fn.extend({
    animateHeader: function(){
       $(this).find('#header').css('background-position', '0px 0px');
       $(this).find('#header').animate({
            backgroundPosition: '-20px 0px'
       }, 100, 'linear', function() {
            animateHeader(self);
       });
    }
    });
    });

    $(document).ready(function() {
    $(this).animateHeader();
    });

    });

P.S. The background image it self is 1598 x 337px here is the way it looks if some one is interested: http://i54.tinypic.com/25zng2r.jpg

Answer 1

You can’t by default, but you can use this plugin to achieve your desired result:
http://www.protofunc.com/scripts/jquery/backgroundPosition/