I am trying to apply an image to the navbar background, I would like this image to be 100% width and 50% height however the image cuts off, I was wondering if it is possible to autosize the image so it fits and resizes when the active window size changes.
HTML
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse fixed-top">
<h1>Some catchy line here...</h1>
<center>
<a class="button purple" href="#"><i class="fa fa-home" aria-hidden="true"></i> Home</a>
<a class="button purple" href="#"><i class="fa fa-star" aria-hidden="true"></i> Home</a>
<a class="button purple" href="#"><i class="fa fa fa-clock-o" aria-hidden="true"></i> Home</a>
<a class="button purple" href="#"><i class="fa fa-line-chart" aria-hidden="true"></i> Home</a>
<a class="button purple" href="#"><i class="fa fa-handshake-o" aria-hidden="true"></i> Home</a>
<a class="button purple" href="#"><i class="fa fa-question-circle" aria-hidden="true"></i> Home</a>
</center>
</nav>
https://jsfiddle.net/bkezwpgg/1/
Thanks.
Please add background-size: cover; to .navbar