Bootstrap 5: Parallax Cheatsheet

This website is meant to show you how to easily style an image to have parallax scrolling on your website.

What is Parallax?


Parallax scrolling is a Bootstrap function that allows for the foreground and background to scroll at different speeds. It enables elements in the foreground to scroll past a fixed image in the background.

Parallax with HTML, CSS, and Bootstrap


1. Create a .parallax class within CSS.

2. Within that class, add the following declarations to the CSS class:

.parallax {
min-height: [whichever height];
background-attachment: fixed;
background-size: cover;
background-position: 50% 50%;
}
3. Create a .parallax-img class:
.parallax-img {
background-image: url(insert url here);
}
4. Go into HTML and create a DIV with with the following classes.
< div class="container parallax parallax-img bg-primary" >
IMPORTANT: Don't forget to add a bg-primary (or another Bootstrap background class) or else your image may not show up. If it doesn't, add an !important command to the .parallax-img class.

5. Style the image how you like. Changing the min-height and background-position can change the way your image looks. Adding the Bootstrap class container-fluid will make the image span across 100% of the screen and adding a height of 100vh; to the parallax class will make the image 100% of the view screen.