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

I want to recreate this simple bottstrap page I found on the internet.
conquer_bootstrap_page

If you scroll down the page you will see that the 1st background image hide behind the CONQUER text and the title appear to be floating above the image.

I have no idea how to achieve this effect, could someone help me?

Here is my codepen

That effect is called Parallax Scrolling… Here’s a link to WC3 for how its done…super cool effect yeah, that is actually very easy to implement! https://www.w3schools.com/howto/howto_css_parallax.asp

2 Likes

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

The W3Schools article is misusing the word “parallax”, it’s just a fixed background image. Parallax is the effect you see when your viewpoint is moving relative to a closer point and a further away point. For example, if you’re driving along and you can see trees in the foreground and mountains in the background, the trees will appear to be moving (relative to you) very fast, and the mountains much slower.

This article explains how to create a true parallax effect with pure CSS.

3 Likes

This is true… In all fairness, W3S shows how to create an illusion of parallax scrolling, and not the truest form of the technique. I will admit, I suggested that link because its the one I ended up using in a project and have ever since…

When I tried to do parallax scrolling, I had so many issues with browser compatibility that when I found this I pretty much said…yup…good enough and chucked it into my toolbox. But definitely is good to point out that the background image does not move at all, while in parallax scrolling it does…and now that you mention it, I should probably take some time out to learn how :laughing:

1 Like

Thanks :slight_smile: