Calculating Breakpoints of `background-size` Property - html

Question

I have a centered viewport who has a large image as its background. Due to other elements on the page, we elected to have some breakpoints depending on the sizes of of these other elements. So far so good, my layout works fine.
The one gotcha is that since the image used isn't tall enough, once it reaches a certain size the background-color shows and there are bars that are introduced on either side. This has to do with the ratio of the image vs. the ratio of the viewport.
Solution with Bars:
http://output.jsbin.com/vecele
Now, the fix here is to find at what point the bars are introduced. Anything larger than that size, down to the cutoff means the background-size needs to be changed to background-size: 100% auto; vs when before when it was set to background-size: auto 100%;
Fixed Solution:
http://output.jsbin.com/fonozagova/
Now my question is how do I mathematically figure out that "magic number" cutoff? In my example, I just played with the window size to find the actual number I should use here, which really isn't optimal.

Answer 1

Why not set the background size to cover? It will scale the the background image proportionally to fill the container regardless of what the size is.
div.container {
background-size: cover;
}

Answer 2

you can use a pseudo-element with a vertical-padding in % that will use elements width as reference. the ratio will be kept no matter width updates:
.hero {
background-color: #0a6ba1;
}
#header {
background-image: url('https://suretybonds.com/img/bonds/giant-header/inspector-1800.png');
background-repeat: no-repeat;
background-size: 100% auto;
overflow: hidden;
margin: 0 auto 40px;
max-width: 1600px;
position: relative;
}
#header:before {
content:'';
display:inline-block;
padding: 26% 0 0;
}
#media screen and (min-width: 699px) and (max-width: 1465px) {
#header {
}
}
#media screen and (min-width: 0) and (max-width: 699px) {
#header {
}
}
#media screen and (min-width: 0) and (max-width: 500px) {
#header {
}
}
/* extra for demo */
#header {
text-align:center;
font-size:4vw;
}
#header:before {
vertical-align:middle;
}
<div id="header" class="hero">resize window's width</div>
http://jsbin.com/lafosakeke/1/edit?output