Moving Background image in a loop from left to right

Question

I would like to have a moving background image on my page from left to right exactly the same way as in following website http://kxip.in , please suggest how to achieve this.

Answer 1

The easiest way to achieve this i believe is to use using a little bit of Javascript. You can find the javascript they user to use as an example here: http://kxip.in/js/background-moving.js

 // speed in milliseconds
var scrollSpeed = 70;

// set the default position
var current = 0;

// set the direction
var direction = 'h';

function bgscroll() {

  // 1 pixel row at a time
  current -= 1;

  // move the background with backgrond-position css properties
  $('div.background-image').css("backgroundPosition", (direction == 'h') ? current+"px 0" : "0 " + current+"px");
}

//Calls the scrolling function repeatedly
setInterval("bgscroll()", scrollSpeed);

I urge you however not to simply copy and paste because this will likely not work for you.