How to Create a Parallax Scrolling Effect in CSS

CSSWeb DevelopmentFront End Technology

By specifying different speeds for background and foreground content, we can create a parallax scrolling effect using CSS.

The following example shows the CSS parallax scrolling effect −


 Live Demo

<!DOCTYPE html>
body, html {
   height: 100%;
   text-align: center;
.example {
   height: 100%;
   background-attachment: fixed;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
#demo {
   background: url(" 1101522e9a21?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixlib=rb1.2.1&q=80&w=800");
#dist {
   background-color: rgba(102,234,99,0.5);
   padding: 2%;
#d2 {
   background: url("");
<div id="demo" class="example"></div>
<div id="dist">
Sed a porttitor enim. Integer euismod dui massa, at posuere sem fermentum at. Fusce vehicula
fringilla tortor, ut mattis sapien tristique ac. Phasellus eleifend malesuada orci, et facilisis arcu
egestas vel. Duis in tempus libero. Nunc nibh arcu, tempus quis lectus ut, blandit tincidunt felis. Suspendisse potenti.
<div id="d2" class="example"></div>


This will produce the following result −

Updated on 13-Mar-2021 12:12:14