ブートストラップコンテナに画像をバックグラウンドで表示するには

Question

私はウェブ開発にはかなり新しいですが、現時点でウェブサイトを作ろうとしています。コンテナの背景としてイメージをロードできないという問題が発生しています。あなたは、ミルカーカーボンコピーブートストラップウェブサイトのそれらのように知っています。私はここにいくつかの記事を読んだが、彼らは私の問題を解決するのに役立たなかった。

ファイル構造：

/css/ 
    master.css 
    bootstrap.min.css 
    font-awesome.min.css 
/imgs/ 
    pho.jpg 
/scripts/ 
    bootstrap.min.js 
index.html 

HTML：

<div class="container-fluid" id="landing"> 
    <div class="row"> 
     <div class="col-md-12"> 
     <ul class="nav nav-fill" id="topNav"> 
      <li class="nav-item"> 
      <a href="#" class="nav-link" id="orderOnline"><i class="fa fa-globe" aria-hidden="true"></i> Order Online</a> 
      </li> 
      <li class="nav-item"> 
      <a href="#" class="nav-link" id="contactPhone"><i class="fa fa-phone" aria-hidden="true"></i> 1-843-123-4567</a> 
      </li> 
      <li class="nav-item"> 
      <a href="#" class="nav-link" id="hours"><i class="fa fa-clock-o" aria-hidden="true"></i> 10:00 - 23:59</a> 
      </li> 
      <li class="nav-item"> 
      <a href="#" class="nav-link" id="myAccount"><i class="fa fa-user-circle" aria-hidden="true"></i> My Account</a> 
      </li> 
      <li> 
      <a href="#" class="nav-link" id="cart"><i class="fa fa-shopping-cart" aria-hidden="true"></i> Cart</a> 
      </li> 
     </ul><!-- end of topNav --> 
     <nav class="navbar navbar-expand-lg navbar-transparent"> 
      <a class="navbar-brand" href="#">Low-Country Thai Cuisine</a> 
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
      <span class="navbar-toggler-icon"></span> 
      </button> 

      <div class="collapse navbar-collapse" id="navbarSupportedContent"> 
      <ul class="navbar-nav mr-auto"> 
       <li class="nav-item active"> 
       <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
       </li> 
       <li class="nav-item"> 
       <a class="nav-link" href="#">About</a> 
       </li> 
       <li class="nav-item"> 
       <a class="nav-link" href="#">Menu</a> 
       </li> 
       <li class="nav-item"> 
       <a class="nav-link" href="#">Contact</a> 
       </li> 
      </ul> 
      </div> 
     </nav> <!-- end of navbar --> 
     </div><!-- end of landing --> 
    </div><!-- end of row --> 

CSS：

#landing { 
    background-image: url('../imgs/pho.jpg') no-repeat; 
    -webkit-background-size: 100% auto; 
    -moz-background-size: 100% auto; 
    -o-background-size: 100% auto; 
    background-size: 100% auto; 
} 

は、だから私は間違って何をやっていますか？なぜ？

Answer 1

1つのプロパティで2つの背景プロパティを指定しています。だから、背景の省略表現のプロパティ：backgroundを使うべきです。 以下のように記述してください。

#landing { 
    background: url('../imgs/pho.jpg') no-repeat; 
    -webkit-background-size: 100% auto; 
    -moz-background-size: 100% auto; 
    -o-background-size: 100% auto; 
    background-size: 100% auto; 
}