如何在引导容器中显示图像作为背景

Question

我对网络开发很新颖，但我正在尝试制作网站。我遇到了一个问题，我无法将图像加载为容器的背景。你知道像那些运行一个工厂碳复制bootstrap网站。我在这里阅读了几篇文章，但他们没有帮助解决我的问题。

文件结构：

/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

您正在一个属性中指定两个背景属性。所以，应该使用背景的简写属性：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; 
}