背景画像が表示されないのはなぜですか？

Question

私はここで別の答えを読んで固定しました（だから私は思った）が、それはまだ表示されません。私はイメージがbackground.jpgであることを知っていて、それはimgフォルダにあります。私は正直なところ、なぜこれが動かないのか混乱しています。ブートストラップでそれを乱すことができますか？私のカスタムCSSはブートストラップCSSの後にあるので、私はそうではないと思います。

.main-section { 
 
    background-image: url(../img/background.jpg); 
 
}

<div class="container-fluid"> 
 
    <nav class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 
     <div class="navbar-header"> 
 
     <a class="navbar-brand" href="#">BFG</a> 
 
     </div> 
 
     <div class="navbar-header"> 
 
     <a class="navbar-brand" href="#"><i class="fa fa-heart" aria-hidden="true"></i></a> 
 
     </div> 
 
     <ul class=" nav navbar-nav"> 
 
     <li><a href="#">Hours</a></li> 
 
     <li><a href="#">Gifts</a></li> 
 
     <li><a href="#">Flowers</a></li> 
 
     <li><a href="#">Balloons</a></li> 
 
     </ul> 
 
    </div> 
 
    </nav> 
 
</div> 
 
<div class="container-fluid"> 
 
    <div class="jumbotron main-section"> 
 
    <div class="row"> 
 
     <div class="col-md-12 text-center"> 
 
     <h1>Balloons Flowers and Gifts</h1> 
 
     <h3>The perfect way to brighten someone's day, and make them smile!</h3> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-md-3 text-center"> 
 
     <a href="#"><h2>Balloons</h2></a> 
 
    </div> 
 
    <div class="col-md-3 text-center"> 
 
     <a href="#"><h2>Flowers</h2></a> 
 
    </div> 
 
    <div class="col-md-3 text-center"> 
 
     <a href="#"><h2>Gifts</h2></a> 
 
    </div> 
 
    <div class="col-md-3 text-center"> 
 
     <a href="#"><h2>Hours</h2></a> 
 
    </div> 
 
    </div>

Answer 1

それはあなたのimgfileだ、私はFirefoxのアイコンのURLを変更し、それが動作します。 ファイルが存在する場合はchech、適切なアクセス権の場合はpath、パスは存在します。背景サイズを追加

.main-section { 
 
    background-image: url(http://newtab.firefoxchina.cn/img/worldindex/logo.png); 
 
}

<div class="container-fluid"> 
 
    <nav class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 
     <div class="navbar-header"> 
 
     <a class="navbar-brand" href="#">BFG</a> 
 
     </div> 
 
     <div class="navbar-header"> 
 
     <a class="navbar-brand" href="#"><i class="fa fa-heart" aria-hidden="true"></i></a> 
 
     </div> 
 
     <ul class=" nav navbar-nav"> 
 
     <li><a href="#">Hours</a></li> 
 
     <li><a href="#">Gifts</a></li> 
 
     <li><a href="#">Flowers</a></li> 
 
     <li><a href="#">Balloons</a></li> 
 
     </ul> 
 
    </div> 
 
    </nav> 
 
</div> 
 
<div class="container-fluid"> 
 
    <div class="jumbotron main-section"> 
 
    <div class="row"> 
 
     <div class="col-md-12 text-center"> 
 
     <h1>Balloons Flowers and Gifts</h1> 
 
     <h3>The perfect way to brighten someone's day, and make them smile!</h3> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-md-3 text-center"> 
 
     <a href="#"><h2>Balloons</h2></a> 
 
    </div> 
 
    <div class="col-md-3 text-center"> 
 
     <a href="#"><h2>Flowers</h2></a> 
 
    </div> 
 
    <div class="col-md-3 text-center"> 
 
     <a href="#"><h2>Gifts</h2></a> 
 
    </div> 
 
    <div class="col-md-3 text-center"> 
 
     <a href="#"><h2>Hours</h2></a> 
 
    </div> 
 
    </div>

Answer 2

してみてください。カバー。あなたの背景の直後。その部分には幅が&であることを確認してください。 希望のこと：