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%);

大众是不正确的单位！

看到这个线程： 是否有任何跨浏览器的javascript来使vh和vw单元正常工作