.bg class 元素上未显示背景图像

Question

我想在我的主页 .intro-body 中添加视差滚动效果，就像我在 'About' 上的超大屏幕图像中添加此效果一样，'Resume' 和 'Portfolio' 页。然而，出于某种原因，当我将它应用到 .bg class 时，背景图像没有显示。图像在其他页面上正确显示；唯一的区别是我在 .bg 之前使用了 #intro，我已经这样做了，这样我就可以设置此图像的样式以适应屏幕的整个高度和宽度。

background: CSS 属性显示下面的图片 fiddle，但我无法在我自己的网站上使用它：

https://jsfiddle.net/c3do6hj0/

我是不是做错了什么？我花了大约 3 个小时研究 SO 但无济于事，所以非常感谢任何想法，谢谢

My homepage

HTML

<header class="intro" id="intro">
<div class="bg"></div>
    <div class="intro-body">
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    <h1 class="brand-heading">Jon Howlett</h1>
                    <p class="intro-text">Aspiring web designer<br/>&amp;<br/>front-end developer</p>
                    <a href="#summary" class="btn btn-circle page-scroll">
                        <i class="fa fa-angle-double-down animate">    </i><span class="zero">Button Down</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</header>

CSS

#intro .bg {
background: url("https://upload.wikimedia.org/wikipedia/common/5/57/LA_Skyline_Mountains2.jpg") no-repeat scroll center bottom / cover;
background-size: cover!important;
position: fixed;
width: 100%;
height: 1000px;
top:0;
left:0;
z-index: -1;    
}

.intro-body {
width: 100%;
height: auto;
padding: 100px 0px;
text-align: center;
color: #FFF;
background: transparent;
}

Answer 1

您在 .bg div 上有一个内联样式：height:0px;。

如果我将 background: #000 url("images/intropage_mountains.jpg") no-repeat scroll center bottom / cover; 添加到 .bg div 然后禁用显示背景图像的内联样式。

您的 javascript 文件中的某些内容似乎正在应用这种内联样式。

当我将 class 更改为其他内容（例如 bg_main 时，内联样式消失并且背景图像有效。

编辑*：作为旁注。我注意到您有 2 个不同版本的 jquery 资源。

http://code.jquery.com/jquery-2.1.4.min.js

和

http://www.jonhowlett.uk/js/jquery.js

我建议您只保留最新版本。拥有多个 jquery 资源有时会导致与您的代码发生冲突。

.bg class 元素上未显示背景图像

Background image not showing on .bg class element

html

css

background-image