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-1, bg-2, and bg-3. And there’s also a fourth div with the class of content.

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 — height: 90vh;.

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.

One 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 divs.

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.