Learning Centre

Bootstrap Jumbotron Background Cover Image

Bootstrap Jumbotron Background Cover Image
Bootstrap Jumbotron Background Cover Image

In Bootstrap, a jumbotron is a lightweight and flexible component to showcase key content on your website, web app or blog. By default, a jumbotron is light grey. You can change the colours but what if you wanted to use a background image. The background image should expand the full width and height of the jumbotron. How can you do this? This tutorial will show you.

HTML

There is no custom HTML to create a jumbotron background cover image. So, your HTML will still look something like this:

<div class="container">
  <div class="jumbotron jumbotron-cover-image">
    <div class="container">
        <h1>Hello, world!</h1>
        <p>...</p>
    </div>
  </div>
</div>

CSS

The following CSS is what will make the background cover image for the jumbotron.

.jumbotron {
    position: relative;
    background: #000 url("jumbotron-bg.png") center center;
    width: 100%;
    height: 100%;
    background-size: cover;
    overflow: hidden;
}

Make sure you change the background color and URL of the jumbotron image on line three (3), background.

Read more