How to create stacking effect when it comes to background image?

3

Hello,

Ho yeah, easy, you’ll have to display and fix the image background using a css style.

background-image: url(“img_parallax.jpg”);
background-attachment: fixed;

To go deeper in the organisation, using a style class will help you to repeat the effect easily, you could imagine a class .parallax with the basic to position the background.

.parallax {
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

and a custom css style in the id of each div to call the image background et set the height

#mountain{
/* The image used /
background-image: url(“img_mountain.jpg”);
/ Set a specific height */
min-height: 500px;
}

I used this tryHow to formulate this answer.
Remember to use Read-Search-Ask if you get stuck.

Have a nice day
J.

1 Like