Scaling CSS Header

Question

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;
}

You can't scale something to the height of a background image. — Paulie_D, Feb 24 '15 at 17:23
You can not make teh header height dependend on a background image. The only portion of the background showing is as much space as the div takes. — j4k3, Feb 24 '15 at 17:27

Aaron · Accepted Answer · 2015-02-24T18:59:56.317

2

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;
}
}

edited Feb 24 '15 at 18:59

answered Feb 24 '15 at 17:25

Aaron

10,187
3
23
39

This is working! Now, is there a way to make the header's height not scale to less than the p height? – CarenRose Feb 24 '15 at 17:48
Use a media query to remove the padding and add a fixed height when the screen matches the image width. – Aaron Feb 24 '15 at 18:56
I've updated my answer for you. If this is correct could click the tick next to my answer. – Aaron Feb 24 '15 at 19:00

score 0 · Answer 2 · answered Feb 24 '15 at 17:26

Assuming you know the height of the background image:

header {
  /* background styles */
  padding-bottom: 20%;
  position: relative;
}

header p {
  position: absolute;
  width: 100%;
}

The bottom-padding on the container will actually be a percentage of its width (not its height), so you can use ratios to force a container to always allow enough room for a scaling image.

The ratio can be calculated as (100 * imageHeight / imageWidth)%

Scaling CSS Header

2 Answers2