CSS only Parallax Scrolling
Tags: css
Published: 2020-04-28 06:13:57

---
title: CSS only Parallax Scrolling
published: true
date: 2020-04-15 03:00:00 UTC
tags: css
canonical_url: https://daily-dev-tips.com/posts/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:

```html
<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](https://daily-dev-tips.com/posts/how-to-work-with-css-viewport-units/).

For the CSS we are going to use the following:

```css
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](https://daily-dev-tips.com/posts/css-flexbox-most-easy-center-vertical-and-horizontal/))

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:

<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="css,result" data-user="rebelchris" data-slug-hash="jObEOKR" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Parallax demo">
  <span>See the Pen <a href="https://codepen.io/rebelchris/pen/jObEOKR">
  Parallax demo</a> by Chris Bongers (<a href="https://codepen.io/rebelchris">@rebelchris</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## 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.

![classList browser support](https://caniuse.bitsofco.de/image/background-attachment.png)

### 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](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)