Parallax Effect Animation Multiple Background CSS Tutorial
Learn to rig parallax effect animations using the new CSS3 multiple backgrounds capabilities. We are using a single DIV element to make all of the magic happen, pure CSS and no complicated scripting.
example.html<!DOCTYPE html>
<html>
<head>
<style>
body{ background: #111; margin: 0px; }
div#banner{
width: 100%;
height: 500px;
margin: 0px auto;
background-color: #000;
background-image: url(planet1.png), url(star1.png), url(star2.png);
background-position: 120% 70px, 0px 0px, 0px 0px;
background-repeat: no-repeat, repeat-x, repeat-x;
animation: animate-background linear 50s infinite;
}
@keyframes animate-background {
from { background-position: 120% 70px, 0px 0px, 0px 0px; }
to { background-position: -20% 70px, -1000px 0px, -500px 0px; }
}
</style>
</head>
<body>
<div id="banner">
<img src="my_rocket.png" alt="rocket" style="margin: 200px 0px 0px 45%;">
</div>
</body>
</html>