Parallax scrolling effect using CSS Last Updated : 11 Oct, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report Parallax scrolling effect using CSS creates an illusion of depth by making background elements move slower than foreground elements as the user scrolls. This effect adds a sense of three-dimensionality, enhancing visual appeal and interactivity on web pages for a more dynamic experience.Approach: Creating Parallax Scrolling Effect Set Background Images: Assign background images to .parallax1 and .parallax2 classes using background-image property for visual content.Parallax Effect Properties: Use background-attachment: fixed to make the background stay static while scrolling.Background Positioning: Utilize background-position: center, background-repeat: no-repeat, and background-size: cover for proper image display.Define Height: Set min-height: 500px for the parallax sections to ensure enough scrolling space.Syntaxbackground-attachment: scroll/fixed/local; background-position: value; background-repeat: repeat/repeat-x/repeat-y/no-repeat;background-size: auto/length/cover/contain/; Example of Parallax scrolling effect using CSSExample: In this example we creates a parallax scrolling effect by setting background images with background-attachment: fixed for .parallax1 and .parallax2, making the background stay static while the content scrolls. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content= "width=device-width, initial-scale=1.0" /> <title>Parallax Scrolling Effect</title> <style> /* CSS for parallax effect */ .parallax1 { background-image: url( "https://media.geeksforgeeks.org/wp-content/uploads/20240313115219/HTML-tutorial.jpg"); min-height: 500px; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; } .parallax2 { background-image: url( "https://media.geeksforgeeks.org/wp-content/uploads/20240313115240/CSS-Tutorial-(1).webp"); min-height: 500px; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; } </style> </head> <body> <div class="parallax1"></div> <div style="height: 300px"> <h4> HTML stands for HyperText Markup Language. It is the standard language used to create and design web pages on the internet. It was introduced by Tim Berners-Lee in 1991 at CERN as a simple markup language. Since then, it has evolved through versions from HTML 2.0 to HTML5 (the latest 2024 version) </h4> </div> <div class="parallax2"></div> </body> </html> OutputParallax scrolling effect Example OutputNote: This parallax effect does not always work with mobiles and tablets, so you need to turn off the effect using media queries. Comment More infoAdvertise with us Next Article Shimmer Effect using CSS A AyushSaxena Improve Article Tags : CSS Similar Reads Shimmer Effect using CSS A Shimmer Effect is much in trend to produce an illusional glass effect on articles, texts, or images. This might seem a very extravagant property from only some CSS frameworks but the fun part is we can do it using CSS and its properties very easily. First of all, create a div container with an art 2 min read How to Create a Smooth Scrolling Effect with CSS? To create a smooth scrolling effect with CSS, use the scroll-behavior: smooth property. This enables smooth transitions between sections of a webpage, offering a more seamless and polished experience for users.Instead of jumping from one section to another, smooth scrolling ensures gentle transition 6 min read How to control scrolling of image using CSS ? In this article, we will see what property can be utilized to control the image scroll using CSS. To accomplish this task, we can implement the background-attachment property that specifies the kind of attachment of the background image with respect to its container. It can be applied to all HTML el 10 min read How to Create a 3D Parallax Effect in CSS? A 3D parallax effect is the effect that is able to change the background on scrolling. This article will show the implementation of a parallax scrolling effect. where it creates multiple image layers with varying depths and scales that move at different speeds while scrolling, producing a 3D-like il 3 min read Create Effect of Particle Animation using CSS At least once, you must have seen a website with particles appearing and disappearing in its background. This cool particle animation may seem complicated but it is actually quite easy to make. In this article, we will set an image as the background of our body, and on it, we will have particles mov 6 min read CSS scroll-padding-left Property The scroll-padding-left property is used to set all the padding to the left of an scroll container or element at once. The value specified for the scroll-padding-left determines how much of the page that is primarily outside the snapsort should remain visible.Syntaxscroll-padding-left:length_valuesO 2 min read Like