MoreLesson 219Free preview

Parallax

This lesson is part of How To · All levels

Summary

Parallax is the effect of depth when the background moves slower than the content in front of it. The simplest CSS implementation uses background-attachments: fixed on the section with the background image. This effect should be used adequately as it can interfere with the comfort and performance of a particular device.

Key points

Background-attachment: fixed making the background image silent against the viewport
Background-size: cover ensures that the background fills an area without distortion
The effects of excessive parallax can cause motion sickness
Prepare a fallback and respect preferences-reduced-motion

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.