Bootstrap Jumbotron with Image Background

Bootstrap Jumbotron with Image Background
Code Snippet:Jumbotron Parallax Image Background
Author: waltir
Published: January 11, 2024
Last Updated: January 22, 2024
Downloads: 12,910
License: MIT
Edit Code online: View on CodePen
Read More

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.

Leave a Comment

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

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X