I Can't Auto-Adjust The Banner

Question

The width is auto-adjusting but if I set height to anything but a px amount, the banner disappears. I've played around with min-height and overflow but the only thing that matters is having a px amount for height.

Thanks in advance.

<div id="banner"></div>
<style>
#banner {
    background:url('.png');

    width:100%;
    height:192px;
    background-size:100%;
    background-repeat: no-repeat;
    margin-left: auto;
    margin-right: auto;      
}
</style>

Answer 1

Assign a height to the html and body tags, then make your div height 100%, as follows:

<style>
html,body
{
    height:100%;
    width:100%;
}

#banner {
background:url('.png');
width:100%;
height:100%;
background-size:100%;
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;      
}
<style>