Advertisement

Create a Masked Background Effect With CSS

by
Final product image
What You'll Be Creating

Today we're going to be stepping through a really cool technique you can use to create an effect that's a little bit like parallax scrolling, yet doesn't need any JavaScript; it can be achieved very simply through pure CSS.

Start by checking out the live demo to see what you're going to learn (you'll need to view on a desktop/laptop to see the effect).

This technique could be used to create great product description pages, or even something akin to a Powerpoint/Keynote presentation, and would be a great potential fit for online story illustration.

Here's how you do it.

It's All in the CSS

The key to this technique the CSS background-attachment: fixed;, available to us since CSS 2.1. Any background image with this styling applied to it will remain in a fixed position relative to the window (not the element it's applied to). We'll use it to keep our illustrations in place while our content scrolls independently alongside it.

A couple of things to be aware of with this CSS property are that as background images will be fixed relative to the window, their position won't be effected by things like margins in the way a regular background image would.

You should also know that while the property works wonderfully in all desktop browsers, it doesn't currently work on Chrome mobile and can be a little jerky on other mobile browsers. So, while your visitors will still see your images just fine, the scrolling effect itself is best viewed on desktop platforms.

How It's Done

The basic steps to achieve what you see in the demo are:

  1. Create a container element and add your content to it.
  2. Set the container (a div in our case) to have padding on one side of around 50% width, therefore pushing the content over to the other side.
  3. Add a background image, also at around 50% width, and position it on the opposite side to the content.
  4. Set background-attachment: fixed; and watch the scrolling magic!

Let's go through how this all happens step by step. You'll want to grab the source files for this tutorial so you have the required images.

1. Basic Setup

Start by creating a project folder and adding an index.html file to it, as well as a css folder with a file named style.css added to it. Copy and paste the four images from the source file zip you downloaded into a folder named images.

Add this HTML to index.html:

What we're doing here is setting up our basic HTML shell, loading in our stylesheet and some Google Fonts, then creating our first div content container that we'll be applying this technique to.

The div container has three classes:

  1. .content - used to set some properties that will be common to all content containers.
  2. .right - identifies that this container should have right-aligned content (we'll also be working with a left-aligned container later)
  3. .illustration_01 - used to set the specific background image and color for this container

Styling

Now we're ready for some CSS. Start by adding some basic normalizing and formatting code to your style.css file:

Now for the .content class. Add this to the bottom of your stylesheet:

This class is where most of the magic happens. For the text, we set our font size and color. For the background you'll see we start by setting background-size to 49% auto. 

This means that the background image will always stretch or shrink to fill 49% of the page width, and the height will adjust proportionately. We are using a value of 49% instead of 50% because otherwise Firefox shows a weird line artefact in the middle of the screen.

We then set background-fixed which, as you already know from the description above, makes the background image stay put when we scroll, and makes its positioning relative to the window rather than the container it's applied to.

Finally we set background-repeat: no-repeat; to ensure our image appears just once on the page.

Next add the .right class to your stylesheet:

This last class places the text content on one half of the screen and the background image on the other.

The background-position setting tells the background image to position itself zero pixels from the left side of the window and to align itself halfway down from the top of the window.

Lastly, add the .illustration_01 class:

This sets the specific background image and color we want for this content container.

Check out your site and you should now see this:

When you scroll down you should see the content slide along while the image stays exactly where it is.

2. Add a Second Container

Let's add another content container, this one with content aligned to the left.

Add this content container HTML below your last div:

Notice this time we use the class .left instead of .right and we've upped the illustration number so the class .illustration_01 is replaced with .illustration_02

Add the following two new classes to your stylesheet:

This time we have the 50% padding applied to the right side of the container so the content will be pushed to the left, and the background is horizontally positioned at 100%, i.e all the way to the right. We also add a different color and image to this container's background.

Check out your site again and start scrolling down. When you reach the end of the first container you should see the second one start coming up, scrubbing over the top of your first image and gradually revealing your second.

3. Insert a Separator

It enhances the effect of this technique if there is a separator between the two containers so let's add that now.

In between your two container divs add this HTML:

And add the .separator class to your stylesheet:

When you refresh your site you should now have a nice separator between your containers:

4. Third and Fourth Containers

You can now enter the code for your remaining separators and content containers.

Add this HTML below your existing divs:

And this CSS to your stylesheet:

You should now have your entire display in place with a third and fourth content container showing:

As well as a final separator to cap it off:

5. Make it Responsive

The very last thing you'll need to do is account for varying screen sizes. When the viewport gets too small to comfortably accommodate our background images we want to switch them to inline images instead.

At the top of each of your content containers, inside the opening divs and above the text, add a figure with the class .smallscreen and inside that place an img tag to load each of the images currently used in the backgrounds:

First content container:

Second content container:

Third content container:

Fourth content container:

We're going to use the .smallscreen class to hide this inline image by default, but to show it when we get to a smaller screen size.

Add the following class to your stylesheet:

We'll now add the media queries that will handle whether the background or inline images are displayed. They will also progressively scale down the size of the text and spacing in the layout so we fit things in nicely at all viewport widths.

Add these media queries to your stylesheet:

The first four media queries are simply reducing the text font size and padding inside the content containers progressively to suit the available screen width.

In the fifth media query of max-width: 50rem we include code that makes the .smallscreen class visible, removes our 50% side padding from the content containers, and hides the background images. When this media query kicks in we'll no longer see the large fixed background images, and instead we'll see regular images at the top of each content container.

Now when you refresh your site you should see it smoothly scale down along with all viewport widths, until you see this at its smallest size:

Conclusion

Even after so many years working with CSS I never fail to be surprised by the ever increasing number of awesome things you can do with it. And the simpler the technique is, the more impressive.

Try out this little gem, it's so quick and easy you're likely to get hooked!

Advertisement