Looking to implement a parallax scrolling effect on the .intro-body section of my homepage, similar to what I have successfully achieved on the jumbotron images of my 'About', 'Resume' and 'Portfolio' pages. However, I'm facing an issue where the background image isn't displaying when applied to the .bg class. The images render correctly on other pages; the only distinction is that I'm using #intro before .bg to style this image to fit the entire screen's height and width.
The CSS property background: in the provided fiddle below shows an image, but I haven't been able to replicate the same result on my website:
I've spent around 3 hours searching on SO for a solution without success. Any insights or ideas are greatly appreciated. Thank you!
Visit 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/>&<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;
}