Hi everybody, this time I’ll give you a hint about moving background image. Depending on your background image you can move anything .  It is not the perfect solution but, it will help to make some move…

Html Codes

Styles

.warper
{
border: 4px solid #026b8e;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
padding: 0;
width: 750px;
overflow: hidden;
left:50%;
height:800px;
background-color: #fff;
}

body
{
height: 100%;
padding: 0;
margin: 0;
background: #fff url(back2.jpg) repeat-x scroll left top;
background-color: #fff !important;
}

JavaScript

<script charset="utf-8" type="text/javascript" src="jquery-1.6.2.js"></script>
<script charset="utf-8" type="text/javascript">
var scrollSpeed = 60; // Speed in milliseconds
var step = 1; // How many pixels to move per step
var current = 0; // The current pixel row
var imageWidth = 1024; // Background image width
var headerWidth = 280; // How wide the header is.

//The pixel row where to start a new loop
var restartPosition = -(imageWidth - headerWidth);

function scrollBg(){
//Go to next pixel row.
current -= step;

//If at the end of the image, then go to the top.
if (current == restartPosition){
current = 0;
}

//Set the CSS of the header.
$('body').css("background-position",current+"px 0");
}

//Calls the scrolling function repeatedly
var init = setInterval("scrollBg()", scrollSpeed);
</script>

Download Sorce Demo