In this CSS tutorial, we will go over how to create Multiple Animated Backgrounds Using CSS. A new trend occurring recently in modern web design is animating your backgrounds at different speeds to give a dimensional or parallax feel. There are different ways of accomplishing this technique, but the simplest way is through using CSS Multiple Backgrounds and adjusting their position on hover. Here is what our end result should look like.

Multiple Animated Backgrounds using CSS

Setting up the Background Images

First, let’s start with setting up our code and placing images into the CSS background. In this example we will be utilizing three images: The background sky, a racetrack, and a car. All three will be moving at different speeds. The slowest will be the sky since it is the furthest, the racetrack will move moderately faster, and the car will move the fastest since it is the closest. Here is our set up code:

With this code we have successfully placed all our images into one div. You may notice that the order in which you place the images (separated by commas) is very important in displaying the layering of each image. It is also important to note that you must state ‘no-reapeat’ in order to display the image once instead of a repeating pattern. Let’s update the CSS to include our initial starting position for each image.

We are now adding to our CSS background short-hand with the coordinates for our image. The CSS background property takes five different values. The most important ones to note is using a px value, a % value, or a general position value (like left top or right bottom). It is also important to note that each one of these values take the X position first and the the Y position second. In our demonstration of our car.png we stated that we wanted it to be placed on the left side of the div and 200px from the top. Now we will look into animating our background images.

Animating the Background Images

In order for our images to animate, we must include an event at which the CSS knows to trigger the animation. We also must add a transition to our .racetrack class to tell the browser how long the animation has to last. By using the :hover pseudo-class, we can store our new background-position coordinates and have the browser update the images when we hover over the div. Let’s update our CSS.

As you can see, we essentially just replaced our old background-position coordinates with new ones when the div is hovered over. A rather simple and code efficient solution to creating a smooth animation.

Wrapping It Up

This is only one of the few ways in which you can animate your CSS background. If you want to challenge your coding skills, try to use Javascript to time the animation on scroll events. This will give you the most control over your animations and will better the user experience.