Image Parallex Effect with CSS

#css #webdev #codepen #beginners

Hello Everyone today i will show your how to create parallex effect with css.

Let's get started...

To create a parallex effect, we need to set the container height like 100vh or whatever height you want.
Then applying the background image using the background-image property.
To fix the background image on it's position we will use background-attachment property and will set it value to fixed.Example is below

.container{
height:100vh;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size:cover;
}

I didn't applied the background-image property in the container because we will be having multiple container and each container will have different background image,we can create a seperate class for creating unique container like this.

<div class="container container-1"></div>
<div class="container container-2"></div>
<div class="container container-3"></div>

You can set the background image to the containers separately using their second class name like this.

.container-1{
background-image:url("image-1-url")
}
.container-2{
background-image:url("image-2-url")
}
.container-3{
background-image:url("image-3-url")
}