How do i make navbar background image scale to navbar border using css
<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>