Bootstrap Jumbotron with Image Background

Bootstrap Jumbotron with Image Background
Code Snippet: Jumbotron Parallax Image Background
Author: waltir
Official website: Go to website
Published: 2 weeks ago
Views: 233

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.

Be the first to comment

Leave a Reply

Your email address will not be published.


*


This site uses Akismet to reduce spam. Learn how your comment data is processed.