How to get a parallax scroll effect with images?

.wrapper {
  height: 100vh;
}

.parallax-img {
  background-image: url('https://placehold.it/1220x1060');
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
}

<div class="wrapper">
  <div class="parallax-img"></div>
  <p>
    /* fill with a looot of text */
  </p>
</div>

<div class="wrapper">
</div>

Copy

September 4th, 2019

# Parallax images on scroll with CSS

A simple css only way to get a parallax effect for images.

Tracking with Matomo to improve the UX. See Privacy Policy for more details.

Snippets

Highlight all images without alt attribute

unshift() - Add element to start of an array

Primitive types in Javascript

map() - Applying a function to every element of an array

Functional Component

Custom bullet points

for...of - Looping an array

Template Literals

Javascript Closure

for...in - Looping an array

Object literal

Multiple ways of creating arrays

Parallax images on scroll with CSS

Creating an object out of an array

Sticky footer with CSS

componentDidUpdate() as hook

forEach() - Looping an array

Padding bottom trick

componentWillUnmount() as hook

componentDidMount() as hook

# Parallax images on scroll with CSS