Q:

Bootstrap jumbotron background image extra space when shrinking

When shrinking my browser window and looking at the jumbotron, theres extra space that keeps expanding underneath the image.
It looks like this:
Normal 100% width

50% browser width:

20% browser width (mobile, the question marks are the expanding extra space):

The grey extra space expands and contracts as I resize my browser.
This is my jumbotron CSS;
    .jumbotron {

    background-image: url('Banner_responsive.jpg')!important;
    background-size: 100% !important;
    background-repeat: no-repeat !important;
    padding-bottom: 17px !important;
    margin-bottom: -5px !important;

}

A:

The background-size property applies auto height when you use one-value syntax. Try this:
background-size: 100% 100%;

Demo
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

