부트 스트랩 컨테이너에 이미지를 배경으로 표시하는 방법

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

하나의 속성에 두 개의 배경 속성을 지정하고 있습니다. 따라서 배경에 대한 속기 속성 : 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; 
}