CSS only Parallax Scrolling

You have probably seen the parallax effect before. You scroll and it looks like the image is sitting in one place and unaffected by the scroll. Some people take these over the top by adding multiple layers and create the most stunning effect!

For today's topic, we will look into doing the simplest setup possible, to get you included in adding this wonderful effect to your website or project.

Parallax scroll using only CSS!

Yes, it is possible to do this only with CSS.

For the HTML, let's use the following setup to keep it simple:

<section class="header">
  <h1>Welcome! 👋</h1>
  <h2>How are you?</h2>
</section>
<section class="bg-grey">
  <h2>Demonstrating parallax</h2>
  <br />
  <div>
    <a href="https://daily-dev-tips.com/" target="blank">Blog</a>
    <a href="https://twitter.com/DailyDevTips1" target="blank">Twitter</a>
  </div>
</section>

We included 2 sections which we will make 100% of the viewport, the first one will contain the image which we will attempt to make parallax.

• To read more about the 100% viewport check out this article.

For the CSS we are going to use the following:

section {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
section.header {
  background-image: url('https://images.unsplash.com/photo-1564415637254-92c66292cd64?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=975&q=80');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  color: #fff;
}
.bg-grey {
  background: #efefef;
}

As you can see we make every section width: 100vw (100% of the viewport width) and height: 100vh (100% of the viewport height).

Next, we make this a flex container to center the headings and buttons inside of it. (Read more on alignment here)

Then for the header section, we add the background-image and center it using background-position. Then I learned to always include background-repeat: no-repeat but you can omit this. We set background-size: cover this will make the background expand over the whole section.

And for the magic part 🎩, we set background-attachment: fixed this is what will make it look parallax!

See for yourself in this small demo:

See the Pen Parallax demo by Chris Bongers (@rebelchris) on CodePen.

Browser Support

background-attachment has quite a good browser support, just on mobile it's a bit glitchy, but you can use other queries to fix this.

Thank you for reading, and let's connect!

Thank you for reading my blog, feel free to subscribe to my email newsletter and connect on Facebook or Twitter