Need Empty Div With Background Image To Force Height and Must Be Responsive

Question

I need the following:

• emtpy div with no content
• background image set to the div the
• background image to be fluid/responsive on re-size I cannot set fixed
• dimensions on the div

Everything I try fails to force the div open to support the size of the background image. Any help is greatly appreciated...

http://www.everymountain.us/

<header id="header">
<div class="wrapper">
<div class="inner">
<div class="top_banner"></div>
</div>
<div class="clear"></div>
</div>
</header>

.front #header .top_banner { background: url('images/bg_front.jpg') no-repeat;   background-size: cover; }

Answer 1

Since this is a top google result for creating fluid-height divs in general (not just empty ones like the question specifies), I wanted to leave a CSS Calc solution that lets you put content into the div (the padding trick forces it to be empty):

.my-div {
     background: #ccc url(https://link-to-image/img.jpg) no-repeat 50% 0;
     background-size: 100% auto;
     width: calc(100vw - 350px);
     height: calc((100vw - 350px) * 0.468795); /* replace the decimal with your height / width aspect ratio */
}