Adam Khoury

Donate funds to show love and support

Click the button below to donate funds securely online. You can use your PayPal account or a credit card.

Your donations help free up my time to produce more content and assist in covering server costs. It's also a great way to say thanks for the content!

Application Configuration

Adam will be adding options here soon.

Parallax Effect Animation Multiple Background CSS Tutorial

Published :
Author :
Adam Khoury

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>

Reference Nuts and Bolts

animation @keyframes rule background-color background-image background-position background-repeat