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.

Check out my Bold Outlook digital marketing project, Bold Outlook, for an example of a background cover image.

HTML

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

<div class="jumbotron">
    <div class="container">
        <h1>Hello, world!</h1>
        <p>...</p>
    </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.