Make Twitter Bootstrap Jumbotron Background Image Responsive

Hi! I have discussed about working with Bootstrap Jumbotron component a while back. Jumbotron is a light-weight and flexible plug-in provided by bootstrap to showcase the key features of your website or to launch a sales pitch. You can easily design a landing page with jumbotron by adding html elements like texts, links and buttons to it.

By default it contains plain grey background, but what if you want to add an appropriate background image to jumbotron component? And also to make it responsive so that the image span to full width and height of the unit? Yes! You can do it by tweaking bootstrap’s default css code.

The beauty of bootstrap framework lies in its responsiveness. Though bootstrap provides separate css class to make images responsive, they are not by default. Here we’ll see how to make the background image of bootstrap jumbotron unit responsive.

Making Twitter Bootstrap Jumbotron Background Image Responsive

Bootstrap readily provides css class named .jumbotron and it transforms a <div> component into a jumbotron unit. The html markup to create jumbotron is,

<div class="jumbotron">
    <div class="container">
        <h1>Tropical Holidays</h1>
        <p>Enjoy Your Holidays at the Tropical Paradise! Feel Home at Our Comfy & Luxurious Resorts with Breaktaking Views!!!</p>
        <p><a class="btn btn-primary btn-lg">Look Here For Best Deals &raquo;</a></p>
    </div>
</div>

Adding css class .container inside the .jumbotron class removes padding (white space) and rounded corners around the edges.

The above markup produces a plain jumbotron component like this,

Bootstrap Jumbotron With Plain Background

Now to add background image to the unit, we have to tweak bootstrap’s .jumbotron class like this.

.jumbotron {
    background: #000 url("images/banner.jpg") no-repeat center center;
}

But the above css alone doesn’t make the background image responsive. We have to apply another little tweak to it.

.jumbotron {
    background: #000 url("images/banner.jpg") no-repeat center center;
    background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    color: #FFF; // change text color
}

That’s it. This makes the image to span to the full height and width of the unit irrespective of the screen size. Additionally I have changed the jumbotron’s text color to white to make it stand out from the background but this is purely optional.

Now check it out with various screen sizes and you get a jumbotron component with responsive background image like this,

Bootstrap Jumbotron With Responsive Background Image

Also Read:

• How to Create Carousel Image Slider with Bootstrap
• How to Build Responsive Image Gallery in Bootstrap

I hope you got better understanding of making twitter bootstrap jumbotron background image responsive after reading this tutorial. I hope you like it. Please don't forget to share it on your cirlce.