Bootstrap Jumbotron with Image Background

This lightweight CSS code snippet helps you to add a background image in Bootstrap jumbotron with a parallax scroll effect. It modifies the jumbotron that occupies the entire horizontal space of its parent. Furthermore, you can also set gradient color overlay over the background image with the help of this CSS snippet.

How to Create Bootstrap Jumbotron with Background Image

1. First of all, load the Bootstrap CSS in the head tag of your HTML document.

<!-- Bootstrap CSS -->
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css'>

2. After that, create the Bootstrap jumbotron with an extra class "jumbotron-fluid" and place your jumbotron content in it.

<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1 class="display-2">Jumbotron Heading Text Goes Here</h1>
    <p class="lead">Your jumbotron text content goes here...</p>
    <button class="btn btn-outline-danger">This is a Button</button>
  </div>
</div>

3. Now, define target the Bootstrap “jumbotron” class and define the CSS styles as follows:

.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;
}

In the above CSS code snippet, you just need to update the URL of your background image. As you have seen on the demo page, there is a parallax scroll effect. If you don’t want to use this effect, simply remove the "background-attachment: fixed;" line in the above CSS. Similarly, you can also remove the gradient overlay.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.