0

I am trying to create a parallax scrolling effect using only CSS and with no third party libraries. Using background-attachment: fixed I was able to achieve the effect I wanted on multiple full-width divs on my page. Using that, however, negatively impacted performance a great deal. I instead changed my method to the one found here:

.element {
  overflow: hidden; // added for pseudo-element
  position: relative; // added for pseudo-element

  // Fixed-position background image
  &::before {
    content: ' ';
    position: fixed; // instead of background-attachment
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url('/path/to/img.jpg') no-repeat center center;
    background-size: cover;
    will-change: transform; // creates a new paint layer
    z-index: -1;
  }
}

I used this method on one div to try it out, and it worked excellently. When I applied it to the rest, however, the backgrounds all overlapped, and I only ever saw one of them (since the rest were behind it). It's clearly a z-index issue since all of the pseudo elements are overlapping, but I can't think of a CSS only solution.

topherlicious
  • 173
  • 3
  • 13
  • 1
    Would you mind linking to a demo? – Hudson Taylor Apr 07 '17 at 12:59
  • I made codepens demonstrating the issue. [This](http://codepen.io/anon/pen/peXyNZ) one shows how it looks when working correctly (only on one div) and [this](http://codepen.io/anon/pen/vxqGKG) is how it looks when I copy the effect to multiple elements (every div - does not work). – topherlicious Apr 07 '17 at 13:22

1 Answers1

0

Unfortunately, I do not think your parallax effect will work on more than one div. Even in the working example, the first image stays as the background for the whole page no matter which div you are in. It just gets covered up by divs 1 and 2.

I would take a look at the following link on making multiple div parallax effects:

Pure CSS Parallax Websites

Hope this helps!

Hudson Taylor
  • 1,142
  • 2
  • 10
  • 30