html - CSS background image style via ID selector not applying -


i facing simple problem taking lot of time.

i have simple css defines image background:

#header-content{      background-image: url("../images/header-img.png");      background-repeat: no-repeat;      background-position-x: center;      -webkit-background-size: cover;      -moz-background-size: cover;      -o-background-size: cover;      background-size: cover; } 

and div in html page has id:

<!-- header --> <div id="header">     <div class="container-fluid">          <div class="row">              <div class="col-md-12">                  <div id="header-content">                   </div>              </div>          </div>      </div>  </div> <!-- header --> 

very simple. image not shown. problem?

p.s.: image directory correct.

your problem #header-content div doesn't have size. try adding: height: 100px; width: 200px

#header-content{   background-image: url("http://unsplash.com/photos/1-isiwubmiw/download");   background-repeat: no-repeat;   background-position-x: center;   -webkit-background-size: cover;   -moz-background-size: cover;   -o-background-size: cover;   background-size: cover;   height: 100px;   width: 200px;  }
<!-- header -->  <div id="header">      <div class="container-fluid">           <div class="row">               <div class="col-md-12">                   <div id="header-content">                     </div>               </div>           </div>       </div>   </div>  <!-- header -->


Comments