Header Image Not Fully Responsive

I am using an image as my header and seem to be having some issues with it being fully responsive in both width and height. I have my content set at 940px. So when the screen width goes below that it begins to shrink the width of the image, but it doesn’t change the height of the image at an equal rate. The code I have implemented from searching other forum topics is as follows:

#header-inner-bg > .container {
background-image: url(‘http://www.passivecashliving.com/wp-content/uploads/2016/02/Passive-cash-living-940px-1.jpg’);
padding-top:250px;
background-size:100% 100% !important;
background-position:center center;
}

#header-inner.nav-type-2 #logo img { display: none !important; }

I am currently using the Highend Child Theme for my custom CSS. My site is http://www.passivecashliving.com. However my site is currently offline so you won’t be able to see it anyways. I’ll attach a screen shot of each.