background-image css not working

问题

I'm building a simple site with bootstrap and I can't seem to get the background-image css styling to work. I want to put it on my .jumbotron div which is the first section of my website (besides the navbar, some would call it the hero section).

Here is my code, where did I go wrong?

.main-banner {
    background-image: url("../img/collection-of-classic-cars.jpg") no-repeat;
}

<section>
    <div class="jumbotron">
        <div class="container">
            <div class="main-banner"></div>
            <h1>Welcome!</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <a class="btn btn-primary btn-lg" href="#name" role="button">Contact us</a>
        </div>
    </div>
</section>

File Path:

/img/collection-of-classic-cars.jpg

回答1:

Note that the image URL should be relative to the stylesheet not the HTML you are serving. So most likely your image path is not correct. Other very common mistake is mismatch in the file name. FOO.jpg is not the same as foo.jpg in unix like systems.

回答2:

You shouldn't use no-repeat in background-image property, it's can be used within background shorthand, so make it this way:

.main-banner {
  background-image: url("../img/collection-of-classic-cars.jpg");
  background-repeat: no-repeat;
}

http://tympanus.net/codrops/css_reference/background-image/ http://tympanus.net/codrops/css_reference/background-repeat/

回答3:

<div class="main-banner"></div> have no size... http://jsfiddle.net/fnw39gco/1/

no repeat need to define as own css tag:

background-repeat:no-repeat

http://www.w3schools.com/cssref/pr_background-repeat.asp

回答4:

As vicodin stated, your CSS code is wrong. The background-image property will only accept a URL. The best way would be to use the background shorthand:

background: url("../img/collection-of-classic-cars.jpg") no-repeat;

/* Adding even more options */
background: #FFF url('img.jpg') center fixed no-repeat;

/* Which would be the same as */
background-color: #FFF;
background-image: url('img.jpg');
background-position: center;
background-attachment: fixed;

来源：https://stackoverflow.com/questions/37504556/background-image-css-not-working

标签

html

css

twitter-bootstrap

background-image