Jumbotron Wallpaper

I tried everything and searched everywhere. But nothing works. I guess it's such an easy problem, I just won't get there.

I want to set a background image on my jumbotron since I am using bootstrap.

Here's 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>

    <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 CSS

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



Unfortunately, nothing happens.

I feel like the nob is asking this, but I'm new to this.




source to share

4 answers

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



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

    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.



This is probably a combination of two things:

  • You first specified an attribute background-image

    . It would be nice if you didn't add other properties. Therefore, you should rather use the attribute background

    here as in the previous answer.
  • Next, whether or not your style is applied jumbotron

    depends on the other in which you load the CSS files on your page. If you load your CSS file before Bootstrap CSS, then the styles from the Bootstrap CSS file are likely to override your style. In this case, your styles will not be applied. Thus, you must load a specific CSS file after loading the Bootstrap CSS file.


    background-image: url(../image/green-forest.jpg); }


Try this code to set image to Jumbotron class.



All Articles