title: How do i make navbar background image scale to navbar border using css
body: <p>The css i am using for the background image is shown below. My problem is that when the browser is resized the image doesnt resize to fill the navbar completely. See pictures below</p>
  
  <pre><code>#navmenu{
    width:auto;
    height:240px !important;
  
    background-image: url("../Images/IMG-20160222-WA0001.jpg");
    background-repeat:no-repeat !important;
    background-size:cover !important; /*strech to fit navbar border*/
  }
  </code></pre>
  
  <p>I tried playing around with the width attribute and had no luck with this. Thanks.</p>
  
  <p><a href="https://i.stack.imgur.com/Ao7JD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ao7JD.png" alt="Cropped image view screen size decreased"></a>
  <a href="https://i.stack.imgur.com/oYY9M.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oYY9M.png" alt="Full image view when screen maximised"></a></p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>With the option [<code>background-size:contain !important;</code>] the image does not fit the navbar border. please see last image.<a href="https://i.stack.imgur.com/M3vtZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/M3vtZ.png" alt="enter image description here"></a></p>