Background image not showing on .bg class element - html

Question

I want to add a parallax scrolling effect to the .intro-body of my home-page in the same way that I have added this effect to the jumbotron images I have on my 'About', 'Resume' and 'Portfolio' pages. For some reason however the background image doesn't show when I apply it to the .bg class. The images show correctly on the other pages; the only difference is that I'm using #intro before .bg which I have done so that I can style this image to fit the entire height and width of the screen.
The background: CSS property is showing an image in the below fiddle, but I can't get it to work on my own website:
https://jsfiddle.net/c3do6hj0/
Is there something I'm doing wrong here? I've spent about 3 hours researching on SO but to no avail, so any ideas are much appreciated, thanks
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;
}

Answer 1

You have an inline style on the .bg div: height:0px;.
If i add the background: #000 url("images/intropage_mountains.jpg") no-repeat scroll center bottom / cover; to the .bg div then disable the inline style the background image shows up.
It appears that something in one of your javascript files is applying this inline-style.
When i change the class to something else such as bg_main the inline-style goes away and the background image works.
EDIT*: As a side note. I noticed that you have 2 different versions of jquery resourced.
http://code.jquery.com/jquery-2.1.4.min.js
and
http://www.jonhowlett.uk/js/jquery.js
I would advise you to only keep the latest version. having more than one jquery resource can sometimes cause conflicts with your code.