Learn how to create a scrolling background effect using CSS in this hands-on tutorial.
In today’s Take 5, you’re going to make a scrolling background image effect as seen here. This effect is similar to the parallax effect that can be found on many places across the web, such as this one.
Your version will be using the CSS
background-size: cover and
background-attachment: fixed features, as well as a sprinkling of viewport height, or
vh units. Here’s the project on CodePen you’ll be working with, and here’s the URL which you can also find linked within the Resources section for this video.
In your HTML, you’ll see three
divs, each has the class of
bg and an individual ID name —
bg-3. And there’s also a fourth
div with the class of
In the CSS, the
div style has a thin black border to help you visualize the
divs, and the height is set to 200 pixels. The
bg class has this
background-repeat value set to no-repeat, which means the images only show up once. And then last, notice that each ID points to a background image.
Now, I set the
div height to 200 pixels on purpose. I wanted to show you that it’s not obvious that the heights of all background images are actually 550 pixels.
Increase the height of the
divs to 300 pixels to reveal more image.
Increase it to 600 pixels, and you’ll see the entire image, as well as an extra 50 pixels of space.
You’ll be revisiting that height in a second, but first, center the images in the bg style by typing:
background-position: center center;.
Next, add the
background-size property and give it a value of cover. The
background-size property with the value of cover scales the image as large as possible without stretching the width or height.
If you’re using this technique, here’s some things to be careful of. If you take a small postage stamp image like this one and scale it up to full page, it’s going to look like garbage.
On the flip side, if you use a high resolution image, it’s going to look great at full size but your user pays a performance penalty by being forced to download unnecessarily large images. So please take the time to find the right balance between image quality and image size for your projects.
Back in your project, you can see how the images now cover the entire span of the
div to the degree possible. Go ahead and add this additional height property and value after the original one —
The 600 pixel value is being left for fallback reasons. A modern browser will use the
vh unit because it’s last in order. An older browser that doesn’t support
vh units will ignore the
vh unit and use the 600 pixel value. You may not be used to
vh units, so save your project and go into the full-view mode while I explain.
vh unit is equal to 1% of the viewports initial containing block. This means that
90vh forces the height of your
divs to 90% of the viewport or browser window.
You can actually see this in the full page view. If you scroll all the way to the top, you can see the bottom of the first
div ends here at 90% height. This remaining 10% here is the top of your second
div. Scrolling down, you can see all your
divs will be the exact same height.
So now, change your view back to the editor. And you’ll add the real star of the show. Go ahead and type:
background-attachment: fixed;. The fixed value forces the background images to stay where they are. If you save your document and go into the full-view mode, you can see this happening.
So it’s kind of disorienting but also kind of cool. What’s effectively happening is the
divs are moving but the background images don’t. Keep in mind these are just decorative background images. There’s no content inside your
We don’t have time to explore what else you could do with that, but as a quick example, copy the very last
div and paste it between
divs 2 and 3. Then go ahead and save and preview in full view.
Now one major catch to be aware of, there’s a big problem with most mobile browsers and this effect. On caniuse.com, you can see that the combination of
background-attachment: fixed and
background-size: cover simply doesn’t work on iOS.
There are some workarounds to address this, but we don’t have time to cover them in this video. If you need to dive into those fixes, however, check our Resources section for help. That’s it for now. Thanks for watching. If you like this video and want to learn more CSS skills, be sure to check out our other Take 5 videos, as well as the rest of the course catalog at Gymnasium.