Creating a parallax effect in CSS can be achieved through several methods, but one simple way is by using CSS’s perspective and transform properties.
Before we start, remember that a parallax effect shifts the position of an image or a background as you scroll up and down. In this example, we’ll be using a simplified method using the CSS background-attachment property.
CSS:
```
.main {
/* Set the height of the main class */
height: 3000px;
/* Set the perspective property */
perspective: 1px;
}
.section {
/* Use the translateZ transform to create the parallax effect */
transform: translateZ(-2px) scale(3);
/* Make sure the images are always on the screen */
overflow: visible;
/* The height should be the full height of the viewport */
height: 100vh;
/* Use a large z-index so the images always stay on top */
z-index: 1;
}
.background {
position: absolute;
/* Set the top, left, and right properties to 0 */
top: 0;
left: 0;
right: 0;
/* The height should be the full height of the viewport */
height: 100vh;
/* Use background-size cover to make sure the images always cover the entire area */
background-size: cover;
/* Use a high z-index so the background image always stays on top */
z-index: -1;
}
.background1 {
/* Set the background image URL */
background-image: url(‘image1.jpg’);
/* Set the background-attachment property to fixed */
background-attachment: fixed;
}
.background2 {
/* Set the background image URL */
background-image: url(‘image2.jpg’);
/* Set the background-attachment property to fixed */
background-attachment: fixed;
}
```
HTML:
```
