html - 通过 ID 选择器的 CSS 背景图像样式不适用

Question

我正面临一个占用我大量时间的简单问题。

我有一个将图像定义为背景的简单 CSS:

#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;
}

以及具有此 ID 的 HTML 页面中的 div:

<!-- 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 -->

很简单。但图像未显示。可能是什么问题呢？

P.S.:图片目录正确

Answer 1

您的问题可能是 #header-content div 没有任何大小。尝试添加:height: 100px;宽度: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 -->