Responsive Bootstrap Jumbotron Background Image

Question

I'm using bootstrap jumbotron, and including a background image. Resizing the screen makes the image tile and repeat, whereas I want the image to be responsively resized.

<div class="jumbotron" style="background-image: url(http://www.californiafootgolfclub.com/static/img/footgolf-1.jpg); background-size: 100%;">    <div class="container for-about">    <h1>About</h1>    </div> </div> 

How would you go about making the image responsive? The site is HERE. Thanks for your ideas!

Answer 1

The simplest way is to set the background-size CSS property to cover:

.jumbotron {   background-image: url("../img/jumbotron_bg.jpg");   background-size: cover; } 

Answer 2

This is what I did.
First, just override the jumbotron class, and do the following:

.jumbotron{     background: url("bg.jpg") no-repeat center center;      -webkit-background-size: 100% 100%;     -moz-background-size: 100% 100%;     -o-background-size: 100% 100%;     background-size: 100% 100%; } 

So, now you have a jumbotron with responsive background in place. However, as Irvin Zhan already answered, the height of the background still not showing correctly.

One thing you can do is fill your div with some spaces such as this:

<div class="jumbotron">     <div class="container">         About         <br><br><br> <!--keep filling br until the height is to your liking-->     </div> </div> 

Or, more elegantly, you can set the height of the container. You might want to add another class so that you don't override Bootstrap container class.

<div class="jumbotron">     <div class="container push-spaces">         About     </div> </div>  .push-spaces {     height: 100px; }