CODEWITHSUNDEEP
htmltwitter-bootstrapcss
Per Källström
Per Källström

Reputation: 39

background-image not being displayed

I am trying to set the background-image on <div class="jumbotron"> which for some reason seems impossible. The image is not being displayed.

If I set the background-image on body with the same code, I get the background-image but not in the jumbotron.

css:

.jumbotron {
    background-image: url("/Img/banner.jpg");
    background-repeat: no-repeat;
    background: #808080;
    color: #ffffff;
    width: 80%;
    max-height: 400px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
}

html:

 <div class="jumbotron">
    <h1>Text</h1>
    <p class="lead">More text</p>
</div>

Upvotes: 1

Views: 104

Answers (3)

matt.
matt.

Reputation: 2369

The problem is that you're setting the background-image property first and then overriding it with the background property.

From MDN:

The background CSS shorthand property assigns explicit given values and sets missing properties to their initial values.

That last bit is important - and sets missing properties to their initial values.

The initial value for the background-image property is none.

So, by setting the background-image and then setting the background with only the color value it is essentially clearing the background-image, setting it back to none.

Try the following, it will fallback to your background color if the image isn't found or does not load correctly.

background: url("/img/banner.jpg") #808080 no-repeat;

Your rule definition would then become

 .jumbotron {
     background: url("/img/banner.jpg") #808080 no-repeat;
     color: #ffffff;
     width: 80%;
     max-height: 400px;
     margin-left: auto;
     margin-right: auto;
     margin-bottom: 0;
 }

Here are a two examples to show how it works, one with a working image url and one without that reverts to your fallback color.

Example with working image url

.jumbotron {
     background: url("https://placehold.it/650x175?text=BANNER HERE") #808080 no-repeat;
     color: #ffffff;
     width: 80%;
     max-height: 400px;
     margin-left: auto;
     margin-right: auto;
     margin-bottom: 0;
 }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron">
    <h1>Text</h1>
    <p class="lead">More text</p>
</div>

Example with a broken image url reverting to fallback color

.jumbotron {
     background: url("https://broken.url/noimagehere.jpg") #808080 no-repeat;
     color: #ffffff;
     width: 80%;
     max-height: 400px;
     margin-left: auto;
     margin-right: auto;
     margin-bottom: 0;
 }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron">
    <h1>Text</h1>
    <p class="lead">More text</p>
</div>

Upvotes: 2

M&#252;nich
M&#252;nich

Reputation: 343

Hmn, try to open your browser tools and check this jumbotron. You can try to use Mozilla for it, they have really nice tools and you can very easy manipulate CSS styles.

You can also try something like this:

 <div class="jumbotron" style="background-color: #000">
    <h1>Text</h1>
    <p class="lead">More text</p>
</div>

Upvotes: 1

FBC
FBC

Reputation: 1132

you need to remove: background: #808080; in the .jumbotron class

Upvotes: 1

Related Questions