How do I do this content parallax effect scroll on background?

[Porkbun]

I’m working on a project utilizing bootstrap and the client wants this parallax effect for their content when scrolling:

Things To Do in July

How do this with Bootstrap? Are there any good tutorials around?

[21garg]

@W3Schools

Use a container element and add a background image to the container with a specific height. Then use the background-attachment: fixed to create the actual parallax effect. The other background properties are used to center and scale the image perfectly:

See https://www.w3schools.com/howto/howto_css_parallax.asp

Post edited by TechnoBear to format and attribute quoted content

[Porkbun]

Thanks! Do you happen to have an example?

[TechnoBear]

@Porkbun: 21garg’s reply was copied from W3Schools, but without the example code they provided. I have now added the link to her post.

[ralphm]

Just for the record, this effect is not the real meaning of “parallax”. It’s really just a fixed background image. Parallax (in web terms, at least) is when a number of elements move at different rates in relation to each other during scrolling.