Jumbotron Background Image

Question

I've tried everything and searched everywhere. But nothing seems to work. It's such an easy problem to solve I think, I'm just not getting there alone.

I want to set a background image on my jumbotron, since I'm using bootstrap.

Here is what I did.

<div class="jumbotron center " > <!-- start jumbotron -->

  <div class="container">

    <div class="jb-text">
        <h1>This is an epic service</h1>
        <h3>Not really, just trying this thing out</h3>
    </div>

    <button class="btn btn-default" id="btn-custom"><a href="#">Start Your     <strong>Free</strong> Trial</a></button>

  </div> <!-- end container -->

</div> <!-- end jumbotron -->

And this is the CSS

.jumbotron{
    background-image: url('image/green-forest.jpg') no-repeat center center;

}

Unfortunately nothing happens.

Answer 1

The problem is that you have used background-image instead of background property.

Answer 2

I was just having the same problem. Since my css file was contained within a stylesheets folder, and I stored images in a different folder, I had to change it to:

.jumbotron{
    background-image: url('../image/green-forest.jpg') no-repeat center center;
}

This is because your url is relative to the location of your css file, not your HTML file.