Jason Murray Jason Murray - 1 year ago 238
HTML Question

Bootstrap Jumbotron Background Image Not Responsive

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?


<!-- 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>
<a class="navbar-brand" href="index.html">Jason<span>Murray</span></a>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</div><!--/.nav-collapse -->

<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>

<footer class="footer">
<div class="container">
<p class="text-center">Copyright &copy; 2016 <a href="index.html" target="_blank">Jason Murray Web Design</a>. All Rights Reserved</p>

<!-- 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>


.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 Source

There is a margin bottom to this jumbotron class, so remove margin:

.jumbotron {
  margin-bottom: 0;

Here is the fiddle: fiddle link

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download