Firefox 和 chrome 上不显示背景图片

Question

我有一个问题，背景图像没有显示在 chrome 和 firefox 上；它是全宽的 div 的背景图像。任何帮助表示赞赏:) 请参阅下面的代码：

#judges {
 width: 960px;
 margin: 0 auto;
 padding-top: 80px;
}

#judges .col1 p, #judges .col2 p {
 font-family: 'SohoGothicPro-regular', verdana, sans-serif;
 text-align: center;

}

#judges .col1 p, #judges .col2 p, #judges .col1 h3, #judges .col1 h3 {
 color: white;
} 

#judges_bg {
 clear: both;
 background-image: url('img/faces.png');
    position: absolute;
    width: 100vw;
    left: calc(-50vw + 50%);
    height: 380px;
    overflow: hidden;
}


#judges .readmore a {
 color: white;
}

    <div id="judges_bg" class="grey_overley">
     <div id="judges"><!-- JUDGES START -->
   
   <div class="col1" style="color: white; text-shadow: 0 0 70px rgba(1,2,2,.99); font-family: 'SohoGothicPro-bold', verdana, sans-serif;">
    <div  class="wow slideInLeft" data-wow-duration="2s"  data-wow-offset="100"><p>The distinguished, international panel of judges is comprised of engineers and scientists representing the diversity of the profession. Lord Alec Broers is Chairman of the 2015 Judging Panel.</p></div>
   </div>
   
   <div class="col2">
   <div  class="wow slideInRight" data-wow-duration="2s" data-wow-offset="100">
       <h3 style="color: white; text-shadow: 0 0 70px rgba(1,2,2,.99);">Who are the<br> <span>Judges?</span></h3></div>
      </div>
   
   

   
     </div><!-- JUDGES END -->
     <div class="read_more"><a href="#" style="color: white;">Meet the Judges</a></div>
    </div>

Answer 1

可能是这行写的不好：

background-image: url('img/faces.png');

改为：

background-image: url('../img/faces.png');

我知道问题所在。 img/faces.png 不存在！您使用的是 WordPress，您必须上传要使用的图像。转到图像并单击它，您将看到图像的完整路径名。复制它，并将其粘贴到 url 标签中，如下所示：url('COPY_LINK_HERE')。那必须解决它。

Answer 2

width: 100vw;
left: calc(-50vw + 50%);

vw 单位不正确！

查看此线程：Is there any cross-browser javascript for making vh and vw units work

Firefox 和 chrome 上不显示背景图片

Background image not showing on firefox and chrome

css

background-image