画像の準備
		とりあえずアニメーションさせる画像を用意します。ループさせるので継ぎ目のない画像を作成した方がいいかもです。
		作成したら「bg.png」という名前で保存します。
		今回はこんな画像を作成してみました。
	

デザインがしょぼいとか言ってはいけない!
html+cssでバックグランドに画像を配置
		html+cssは特別なことはなく普通に作ります。
		画像はbodyの「background」で配置してみました。
	
html
<body> <div id="container"> <h1>jQueryでバックグラウンドを無限ループ</h1> <p> このページはjQueryでバックグランド画像をアニメーションループさせるサンプルページです。 </p> </div> </body>
css
		body{
			background: #A6E9FF url(bg.png) repeat-x;
			margin:0;
			padding:0;
		}
		#container {
			margin: 50px auto 0px;
			width: 800px;
			background: #FFFFFF;
			padding: 30px;
			height: 500px;
		}
	
jQueryのセレクタでbackground-positionにアクセス
		背景画像を動かすにはbodyの「background-position」にアクセスする必要がありそうですね。
		jQueryのセレクターで試しに画像の位置を変更してみましょう。
	
javascript
		$(document).ready(function () {
			$('body').css("background-position","100px 100px");
		});
	
	
		これで背景画像がx=100px,y=100pxの位置に配置できたと思います。
		この数値をリアルタイムに変更すればアニメーションが再現できそうです。
	
「setInterval」関数を使用してアニメーション
		アニメーションするには色々方法はあると思いますが、今回は「setInterval」関数を使用します。
		「setInterval」は指定した時間毎に繰り返し処理を実行するタイマーを設置ことができます。
		書式は第1引数に実行する関数名、第2引数に関数を実行する間隔を指定します。
	
setInterval(関数名,実行間隔)
タイマーの中身は「hoge += 1」とすればhogeは1づつ足されていきますので、この変数をbackground-positionのxに入れればいける気がします。
javascript
		$(document).ready(function () {
			//アニメーションスピード
			var scrollSpeed = 1;
			//画像サイズ
			var imgWidth = 500;
			//画像の初期位置
			var posX = 0;
			//ループ処理
			setInterval(function(){
				//画像のサイズまで移動したら0に戻る。
				if (posX >= imgWidth) posX= 0;
				//scrollSpeed分移動
				posX += scrollSpeed;
				$('body').css("background-position",posX+"px 0px");
			}, 1);
		});
	
	
		「posX += scrollSpeed」だけだと変数の許容範囲を越えてしまうので、11行目では画像サイズ分移動したら0に戻しています。
		これで完成です。
	



