Responsive background image

HTML & CSS
1

I’m trying to get a background header image to be responsive. I’ve just discovered (!) background-size: contain; which works fine on the width but only if I give it a fixed height. If I use height: auto; the image shrinks to a really small size. Any clues as to how to get the height to reduce as the width reduces? This is my CSS:

#header {
    padding: 12px 0 0;
    background: white url(images/banner.jpg) no-repeat;
    background-size: contain;
    height: 160px;
}
2

Please supply the image dimensions or the original image and I will try to replicate your problem,

3

Thanks, John. The image is 837 x 160 and the header is simply

<div id="header"></div>

Edit. I have a max-width on the wrapper so it can’t get too big.
Another edit: I have created a codepen at http://codepen.io/gandalf458/pen/QjmeXb

4

Hi there gandalf458,

try this example…

[code]

untitled document #header { width:64%; /* this value is optional */ padding-top:12.16%; /* this value is equal to width times aspect ratio */ margin:auto; background-image:url(http://placehold.it/837x160); background-size:100% auto; }

Something underneath

[/code]

coothead

2 Likes
5

Thanks coothead. I’ll give that a go.

6

I changed the padding-top to 19.11% and it works fine. Thanks @coothead

Funny, I’ve used this technique for responsive videos. Didn’t think of using it for a background image. Der!

7

Percent padding-top is based on the width of the parent container…

The virtual viewing window (.header in this case) needs to fit the full width of its parent container for the percent height provided by the padding to maintain the proper aspect ratio; thus, it may need to be in a wrapper.

I have modified @coothead’s code with a wrapper, .outer, which has a width that is a percent of the browser window so .header can have its default width of 100% (which I believe is what @coothead intended to demonstrate).

Cheers

<!DOCTYPE html>
<html  lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--
http://www.sitepoint.com/community/t/responsive-background-image/205727
-->
<title>untitled document</title>
<style media="screen">
.outer {
    width:64%;          /* this value is optional */
    max-width:837px;    /* this value is optional */
    margin:0 auto;
    outline:1px dashed red;  /* TEST Outline. To Be DELETED */
}
.header {
    padding-top:19.12%;
    background-image:url(http://placehold.it/837x160);
    background-repeat:no-repeat;
    background-size:100% auto;
    outline:1px solid blue;  /* TEST Outline. To Be DELETED */
}
</style>
</head>
<body>

<div class="outer">
    <div class="header"></div>
    <p>Something underneath</p>
</div>

</body>
</html>
1 Like
8

Thanks Ron - that’s what I came up with in the end…

1 Like
9

I’m haviing come crow pie for dessert this evening.

I misinterpreted coothead’s intent earlier today. He intended to demonstrate that the desired background image behavior could be obtained with only one tag. His numbers are good… His intent and methodology are sound. There was a max-width “error” earlier, but that was all, and I missed it.

The usefulness of the one tag method is somewhat limited since the padding-top value needs to be recalculated if the percent width value changes (a pain during development) and a max-width value cannot be assigned to the image, but where it can be used it can save a div :grin:

for Mr. C.

1 Like
10

Hi there ronpat,

I am really sorry for the confusion that my post caused. :cry:

My original effort did contain…

    max-width:837px;    /* this value is optional */

…and after posting I quickly realised that it had been included in error.

Obviously, my editing of the post was not quick enough to stop
gandalf458 and you from using the original for testing. :cold_sweat:

Unfortunately, my septuagenarian mental agility seems to be
going down the pan. :wc:

Now that reminds me to start thinking about impending incontinence. :mask:

coothead

2 Likes
11

Ah - now I understand! I couldn’t understand where the 64% came from and how the top padding came to 12.16%, and since it said the width:64% was optional I left it out. Since I have a max-width on the wrapper that should stop the image growing too much and becoming pixilated I think… Thanks guys

13

Hi @Gandalf, you going to have to set a width for the image.

Try this

#header{
     padding: 12px 0px 0px;
     background-image: url('images/bannder.jpg);
     background-repeat: no-repeat;
    background-size: 100% 160px;
}

The background-size rule can take a couple of other values which give you a different position of the image.
You can try ‘cover’ for the value of background-size.

Hope this helps.
Cheers!

14

Thanks for your reply @otoofelix but @coothead’s and @ronpat’s solutions both work.

15

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.