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.

Contents

CSS Description for Constantly Moving Background Images
JavaScript Description for Constantly Moving Specified Background Images Using jquery.backgroundPosition.js
HTML Description for Constantly Moving Multiple Background Images
jquery.backgroundPosition: Demo Page for Constantly Moving Background Images
Source: Starry Night by CSS-Tricks

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-->