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.

Background Position keyframes Animation CSS Tutorial

Published :
Author :
Adam Khoury

Learn to animate background images in multiple directions. Your backgrounds can animate in any direction, up, down, left, right, or even diagonally. We will be using the CSS keyframes rule and the background-position property to create the effect.

example.html <!DOCTYPE html> <html> <head> <style> body{ margin: 0px; background: #000; } div#banner{ width: 100%; height: 300px; margin: 0px auto; /* overflow: hidden; */ background: url(brick_tile.jpg) repeat; animation: animate-background linear 15s infinite; } @keyframes animate-background { from { background-position: 0px 0px; } to { background-position: 300px 0px; } } div#banner > h1{ color: #FFF; padding: 50px; } </style> </head> <body> <div id="banner"> <h1>My content goes here</h1> </div> </body> </html>