Bootstrap Gradient Image Parallax Full Width Background

In this tutorial we will be covering how to add a gradient image background to a Bootstrap Jumbotron element and how to add a parallax effect using CSS.

This post assumes that you already have Bootstrap implemented in your project. If you do not please click this link.

Attached below is an example of how a Fluid Jumbotron can be used as a home pages background / call to action. The background image has a linear gradient applied and a fixed position giving the Jumbotron a parallax effect. Please feel free to play around with the Codepen snippet!

<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1 class="display-3">Fluid jumbotron</h1>
    <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
  </div>
</div>
  • See the Pen Gradient Image Background Bootstrap Jumbotron by Jerry Seinfeld (@JerrySeinfeld) on CodePen.dark

  • 3