Question

I’ve looked around for this but I couldn’t find an answer, and I don’t have a clue how I would do it. What I am looking for is a JavaScript or jQuery script that will “move” a background image to the right in a div container, so that the pattern will have an “animated” effect.

How would it be possible to do this? I apologize if I have not explained the question in enough detail.

Answer 1

You can use the CSS background-position property to set the position of the background.

Here’s a live example that moves the background one pixel to the right every quarter second, resetting when it reaches 100 pixels.

HTML:

<div id="theDiv">This is the div</div>

CSS:

#theDiv {
    background-image: url(http://www.gravatar.com/avatar/7b13c109d50df67d5f7d0b1d901d7fb7?s=32&d=identicon&r=PG);
    background-repeat: no-repeat;
}

JavaScript:

jQuery(function($) {

  var pos = 0;
  move();

  function move() {
    ++pos;
    if (pos > 100) {
      pos = 0;
    }
    $("#theDiv").css("background-position", pos + "px");
    setTimeout(move, 250);
  }

});