Scaling CSS Header

I am attempting to set up a scalable background image for my header, just based on the width of the browser window (for now). Right now, with what I have, it scales in width just fine. But the header itself does not change height, it's stuck with the height of the lines of text. If I have no text, it doesn't appear at all. When I resize the window larger, the bottom of the header image does not show. I have tried setting min-height to various different values and it is not doing what I need.

I want it to scale the height of the header based on the image. If the window is tiny, it will scale down to the height of the text lines. If it is large, it will scale larger than the text lines. Is it possible? I have seen other sites where it works just fine. I have found instructions how to do it ... in certain specific themes in WordPress.

HTML:

<header>
        <p>
            Line 1<br>
            Line 2<br>
            Line 3<br>
            Line 4<br>
            Line 5<br>
        </p>
</header>

CSS:

header {
    background-image:url('./waybackIMG_1496.jpg');
    background-size : cover;
    background-repeat : no-repeat;
}
header p {
    line-height     : 1.2em;
    text-align      : right;
}

Solution

I would personally use height:0 padding-bottom: %; for the responsive height. I think what you're after is something like this.

header {
    background-image:url('./waybackIMG_1496.jpg');
    background-size : cover;
    background-repeat : no-repeat;
height: 0;
padding-bottom: 40%;
}

Use firebug to adjust the padding bottom to fit the height of your image. With background-size: cover; the image will start to become wider than the viewport when the padding-bottom exceeds its natural size.

Then use a media query to set an absolute header size when it reaches the width of the bg image.

@media (max-width: 900px) {
header {
padding:0;
height: 350px;
}
}