DEV Community

loading...

How To Create A Simple Parallax Style Effect With CSS

Chris Dixon
Teaching Vue, React, JS, WordPress and Web Dev. Learn Javascript for free at http://fun-javascript-projects.com. http://chrisdixon.dev/blog
Updated on ・2 min read

Adding a parallax style effect to our web page can really make it stand out.

You may have seen this effect when scrolling on web pages or apps.

It basically involves the background, in our case an image, scrolling at a different rate to the rest of the content on top of it.

You can find a working codepen example here:

https://codepen.io/chrisdixon161/pen/VwexxYO

There are many options out there to achieve a similar effect, and many making use of Javascript, but we are going to be doing a simple CSS only version.

  • EDIT: Some people have commented that this is not true parallax, please not this is labelled as parallax style and intended to be a quick and simple CSS effect.

How? Let's take a look.

First, we need some HTML content:

<section class="top">
  <p>
~ Scroll down ~
  </p>
</section>

<section class="parallax">
  <p>Some cool overlay text...</p>
</section>

<section class="bottom">
  <p>
~ Scroll up ~
  </p>
</section>

This will give us 3 sections, a top and bottom which is our "regular" content. And a middle section which contains the image.

Now onto the CSS, to begin, this will just be some simple styling not related to the parallax:

.top, .bottom {
  background: lightslategray;  
  height: 100vh;
}


section {
/*  align text  */
  display: flex;
  justify-content: center;
  align-items: center;
}

This will give a gray background to the top and bottom sections, and these sections will appear to move over the middle section soon.

For the parallax to work, we need to add a background image to scroll over:

.parallax {
  /* set image for background   */
  background-image: url('https://res.cloudinary.com/djn1ticju/image/upload/v1594285691/parallax-background.jpg');

/*  full height image  */
  height: 100vh;

/*  image starting position- eg. top, right, left, bottom  */
  background-position: center;

/*  size of image, eg- 50%, 3rem, 500px etc.
    cover= scales the image as large as possible without stretching
  */
  background-size: cover;
}

This will leave us with a pretty regular website with 3 sections, all scrolling together:

Current webpage view with 3 sections

To get the desired effect, the key part is to set this background image to be fixed

.parallax {
  /*... at to rest of code in this .parallax selector: */

/*  To get the desired effect, the key part is to set this background image to be fixed  */
  background-attachment: fixed;
}

Now try to scroll in the browser and see the effect!

Discussion (7)

Collapse
tomhermans profile image
tom hermans

Nice explanation Chris. And very simple indeed.
However, correct me if I'm wrong, this image stays fixed. Isn't a parallax bg supposed to scroll as well, albeit in a much slower fashion, mimicking a depth effect between fore- and background ?

Collapse
dkoczka profile image
David Koczka

Yes, the background should also move at a much lower rate. That is what's called a parallax effect.

Collapse
chrisdixon161 profile image
Chris Dixon Author

Hi Tom
This is why it is labelled "parallax style" to distinguish it, aim was for simplicity.

Collapse
mrkbr profile image
Mario Kober • Edited

This is not parallax, this is just background position fixed. Css parallax is possible but this is the wrong headline for what you did. You correctly write about scrolling some elements at different speeds, but you just stopped scrolling for the background image.

Collapse
chrisdixon161 profile image
Chris Dixon Author

This is why it is labelled "parallax style" to distinguish it

Collapse
makampos profile image
Matheus de Campos

Oh god, very simple! thank you

Collapse
natterstefan profile image
Forem Open with the Forem app