Bootstrap Jumbotron Background Image Not Responsive - html

Question

I'm fairly new to bootstrap and having a hard time trying to get my jumbotron background image to scale properly without showing the white background. I'm using Bootstrap Fixed Nav at the top of the page, Jumbotron (bg image) in the middle, and Sticky Footer. When I test in google chrome to see if the layout is correct, it seems that the image doesn't stretch down to the top of the footer, which shows the white background. How can I get the background image to scale properly for all devices?
HTML:
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<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="index.html">Jason<span>Murray</span></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="jumbotron">
<div class="container">
<h1 class="text-center">Front-End Web Developer</h1>
<p class="text-center">I'm Jason Murray, Front-End Web Developer who loves to write clean codes and build simplistic web designs.</p>
<p class="text-center"><a class="btn btn-primary btn-lg" href="#" role="button">Recent Work</a></p>
</div>
</div>
<footer class="footer">
<div class="container">
<p class="text-center">Copyright © 2016 Jason Murray Web Design. All Rights Reserved</p>
</div>
</footer>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
CSS:
.jumbotron {
background: url("../img/lucho-49.jpg") no-repeat center center;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
}

Answer 1

There is a margin bottom to this jumbotron class, so remove margin:
.jumbotron {
margin-bottom: 0;
}
Here is the fiddle: fiddle link

Answer 2

The image is not stretched down to the top of the footer is because of jumbotron's predefined property margin-bottom: 30px;.
In your CSS code do the following changes:
nav + .jumbotron {
margin-bottom: 0;
background: url("../img/lucho-49.jpg") no-repeat center center;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
}
If you add margin-bottom: 0; in your .jumbotron selector it won't work due to specificity. Hence I've increased the specificity by adding Adjacent Sibling Selector, nav + .jumbotron to override your CSS properties with the predefined bootstrap's .jumbroton CSS properties.