How to implement parallax scrolling on a website

Have you heard of parallax scrolling before?

Well, you might not have heard of it, but I can almost guarantee you’ve seen it before. In fact, this current layout here on HollyPryce.com features parallax scrolling.

Look at the banner image at the top of this page; the image with the blog post title overlaying it. Now scroll up and down the page. Did you notice how the image almost stays still while the rest of the content moves? This effect is called parallax scrolling.

Essentially you create an element that is a container, like a <div>, and give this a specific height. Then you give this container a background and you set this background to be fixed. But don’t worry if this sounds complicated because I’ll break it all down for you!

In this post, I’ll show you how implement parallax scrolling on your website.

1 | Create a container (div)

Let’s start by creating our container (div) for our parallax scrolling to sit in.

<div> </div>

Next, let’s add a class to this div to help with styling. It can be whatever you like, of course, but I’m just going to use “parallax”.

<div class="parallax"> </div>

In order for parallax scrolling to work you need to be able to scroll down the page, and therefore there needs to be enough content on the page to make it scrollable. That’s why in the CodePen demonstration (that I’ve embedded at the end of this post) you will see that I’ve added content above and below the div I have created for my parallax scrolling.

So if when we come to test your scrolling you find that it doesn’t work, make sure your page is scrollable, and add more content if needed.

In terms of HTML, that’s it! Now we need to move on to the CSS.

2 | Set the height of your container

Firstly we need to create a new selector for our new div with the class we have assigned to it (i.e. parallax in this example).

.parallax {

}

Then, we need to give our div a set height. I’m going to make mine 400px tall but you can use any height you wish.

.parallax {
   height: 400px;
}

Great, so we’ve now created our container for our parallax scrolling.

3 | Give your div a background image

Now we are going to specify the background image we want to use for our parallax scrolling. We use the background-image property to do this and the value is going to be the URL of the image you want to use.

.parallax {
   height: 400px;
   background-image: url("notebook-plant.png");
}

If you preview this you will see a static div with a background. If you scroll up and down the page, this image won’t change.

4 | Make your background fixed

The way we turn transform this into a static div into parallax is scroll is by setting the background to be fixed using the background-attachment property:

background-attachment: fixed;

This is what it looks like when we add it to our selector:

.parallax {
   height: 400px;
   background-image: url("notebook-plant.png");
   background-attachment: fixed;
}

You might want to add some additional background styling to your parallax scrolling div:

.parallax {
   height: 400px;
   background-image: url("notebook-plant.png");
   background-attachment: fixed;
   background-position: center; /* To make the image sit in the centre of the div */
   background-repeat: no-repeat; /* To stop the background from repeating */
   background-size: cover; /* To make the background cover the space available */
}

Here’s a GIF to show you what your parallax scrolling should like:

And here is a CodePen so you can see the code in action for yourselves:

See the Pen Parallax Scrolling by Holly Pryce (@hollypryce) on CodePen.

(Note that I have added divs above and below the div with the background to ensure that the page is scrollable.)

And that’s that! You’ve successfully implemented parallax scrolling on a website. Now it’s time to play around and see how you can cleverly incorporate this effect into your website.

Pin for later?