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>
</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 CSS
.jumbotron{
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.
Regards,
Ed
+3
source to share
4 answers
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:
.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.
+1
source to share
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 attributebackground
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.
0
source to share