How to Keep Multiple Background Images Moving with jquery.backgroundPosition.js｜DAD UNION

In this tutorial, I will introduce a method to keep multiple specified background images constantly moving (animation) using jquery.backgroundPosition.js.

CSS Description for Constantly Moving Background Images

We have prepared three patterns of constantly moving background images (#background, #midground, #foreground). Please modify as needed.。

<style type="text/css">
<!--
body{
	margin:0;
	padding:0;
	color:#FFFFFF;
}
h1{
	font-size:18px;
	font-weight:bold;
	line-height:1.6em;
	text-align:center;
	padding:15px 0;
}
#background {
	background: url(images/background.png) repeat 5% 5%;
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 100;
}
#midground {
	background: url(images/midground.png) repeat 20% 20%;
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 100;
}
#foreground {
	background: url(images/foreground.png) repeat 90% 110%;
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 200;
}
#page-wrap {
	width: 720px;
	margin: 0 auto;
	position: relative;
	z-index: 300;
}
-->
</style>

JavaScript Description for Constantly Moving Specified Background Images Using jquery.backgroundPosition.js

Load the jquery-1.3.2.min.js and jquery.backgroundPosition.js files. Note that higher versions of jQuery might not work. The PNG images are specified as layers, and the background image positions are moved.

<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery.backgroundPosition.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
  $('#midground').css({backgroundPosition: '0px 0px'});
  $('#foreground').css({backgroundPosition: '0px 0px'});
  $('#background').css({backgroundPosition: '0px 0px'});

	$('#midground').animate({
		backgroundPosition:"(-10000px -2000px)"
	}, 240000, 'linear');

	$('#foreground').animate({
		backgroundPosition:"(-10000px -2000px)"
	}, 120000, 'linear');

	$('#background').animate({
		backgroundPosition:"(-10000px -2000px)"
	}, 480000, 'linear');

});
</script>

HTML Description for Constantly Moving Multiple Background Images

We have prepared three patterns of background images.

    <div id="background"></div>
	<div id="midground"></div>
	<div id="foreground"></div>
	
	<div id="page-wrap">

	<h1>The specified three background images will always move.</h1>

	</div><!--/page-wrap-->