Fixed background image without a set height - html

Question

I have a div element that must have a background image that is fixed so when you scroll the content rolls over it. My issue is that I have to set a height for that specific div element in order to see it. That is because there isn't any content in that div.
CSS
#top-banner{
background-image: url(../img/grey.jpg);
background-attachment:fixed;
height:700px;
background-repeat: no-repeat;
background-size: 100% auto;
}
HTML
<div class="container-fluid">
<div class="row" >
<div class="col-sm-12" id="top-banner"></div>
</div>
<div class="row">
<div class="col-sm-12 text-center" >
<h1 class="band-name">Lorem Ipsum</h1>
</div>
</div>
</div>
This gives me what I want for larger screens:
But as you shrink the browser, like you are on a phone or tablet, the height for that div pushes all the content down making it look unappealing:
Is there a way to not give it a specific height so the content is not pushed down on smaller screen but still have the fixed background image?
EDIT
Here is a fiddle to check out. http://jsfiddle.net/0xbfhwnt/
I reiterate: It looks fine at first but when you make the browser smaller the image shrinks like it is supposed to but the height of the div stays keeping the content below the image instead of flush with the background image div.

Answer 1

Have you considered something along the lines of media queries?
Here's a first iteration:
http://jsfiddle.net/0xbfhwnt/2/
#media (min-width: 400px) and (max-width: 700px) {
#top-banner{
height: 200px; }
}
#media (min-width: 200px) and (max-width: 399px) {
#top-banner{
height: 100px; }
}
UPDATE
So, using media queries, you can track the size of the main div all the way down to the smallest screen size.
In this example, all the whitespace is gone.
http://jsfiddle.net/0xbfhwnt/7/
#media (min-width: 500px) and (max-width: 800px) {
#top-banner {
height: 200px;}
}
#media (min-width: 375px) and (max-width: 499px) {
#top-banner {
height: 150px;}
}
#media (min-width: 250px) and (max-width: 374px) {
#top-banner {
height: 100px;}
}
#media (min-width: 50px) and (max-width: 249px) {
#top-banner {
height: 50px;}
}
Of course, the smaller the range between min-width and max-width, the smoother the transition would be.