Bootstrap Jumbotron Parallax Linear Gradient Background Image

Jumbotrons are components developed by the folks over at Bootstrap. They can be used as hero elements on any webpage where you would like to make a statement. Below you will see an example of a Parallax Jumbotron that has a linear gradient background image. Please open the Codepen snippet if you would like to play around with it yourself!

HTML:

<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1 class="display-2">Fluid jumbotron.</h1>
    <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
    <button class="btn btn-outline-danger">This is a Button</button>
  </div>
</div>

CSS:

.jumbotron{
    margin:15px 30px 0px 30px;
    border-radius:10px;
    background:linear-gradient(rgba(0, 0, 250, 0.25), rgba(125, 250, 250, 0.45)), 
    url(https://source.unsplash.com/1600x1050/?nature);
    background-repeat: no-repeat;
    background-attachment: fixed;
    color:white !important;
    height:340px;
}

See the Pen Jumbotron Parallax Image Background by Jerry Seinfeld (@JerrySeinfeld) on CodePen.dark

1