Trusted answers to developer questions

How to add a parallax scrolling effect using CSS

Get Started With Machine Learning

Learn the fundamentals of Machine Learning with this free course. Future-proof your career by adding ML skills to your toolkit — or prepare to land a job in AI or Data Science.

The parallax scrolling effect is a 3-Dimensional effect used on various websites. This effect makes the website more visually appealing as it causes the background of the webpage to move at a different speed than the foreground. Parallax scrolling​ effect can be implemented with the help of CSS.

Key-words

Syntax

background-attachment

This property is used to set whether a background image is fixed or scrollable.

svg viewer

background-position

This property determines the starting position of the background image.

svg viewer

background-repeat

This property is used to set whether a background image will repeat or not.

svg viewer

background-size

This property is used to set the size of the background image.

svg viewer

Example with the parallax effect

Example without the parallax effect

RELATED TAGS

css
parallax
Copyright ©2024 Educative, Inc. All rights reserved
Did you find this helpful?