Parallax like background scrolling using CSS

In this blog we are going to create a parallax like scrolling background using css. As we know that there is many plugins for this kind of effects. The question rises that why to make our app heavy when we can do the same thing with a piece of css.

For this we will start by including our HTML part like this as this the basic structure for any banner.

After that we will include the css for the same with the help of which our parallax like background scroll comes live in action

.banner{width: 100%;
height: 500px;
float: left;
background: url(‘banner.jpg’) left top no-repeat;
background-size: cover;
background-attachment: fixed;
}
.content{width: 100%;
position: relative;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
}

Here I’m using transform: translate(-50%, -50%) to make our content div in the middle of banner whether it’s horizontal or vertical. It will always remains in the middle of the banner. But remember that this will work only when parent div has a defined height.

In this way we can create a parallax like background scrolling using css.

THANKS