How to add a parallax scrolling effect using CSS

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

Free Resources

Copyright ©2025 Educative, Inc. All rights reserved