Bootstrap header/jumbotron background image - html

Question

I'm messing around with Bootstrap for the first time and was struggling to get an image as the background for a header that included the nav and jumbotron. Currently the image I've set isn't showing up and I'm not sure why. If you could point me in the right direction as to where or what needs to change it would be appreciated.
<div class="container header-bg">
<nav class="navbar" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Elliott Davidson</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav pull-right">
<li>About</li>
<li>Pictures</li>
<li>Videos</li>
<li>Sponsors</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="jumbotron">
<div class="container">
<h1>Elliott Davidson</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
</div>
</div>
.header-bg {
width:100%;
height:475px;
background: url("img/elliott-davidson-slider.jpg");
background-size:cover;
}
.jumbotron {
color: white;
text-shadow: black 0.3em 0.3em 0.3em;
background: transparent;
}

Answer 1

background: url("../img/elliott-davidson-slider.jpg");
By – Yerko Palma

Answer 2

Try adding "background-image" like so:
.header-bg {
width:100%;
height:475px;
background-image: url("img/elliott-davidson-slider.jpg");
background-size:cover;
}