Scalable background images with CSS

Question

I have a div with a height of 300px. I want to have one or more child images that scale according to this height.

It works great when I use an img with the #src CSS below. Width and height are not defined as pixel resolutions so it scales as it should if I changed the height of #wrap.

Is it possible to do the same with CSS backgrounds (no Javascript) without defining a pixel width/height? I can set a width of 100% and place a max-width in there but that restricts the image to the max-width, and if the image is smaller than the max-width, there will be a gap to the right (which can be very large depending on the value of max-width).

Thanks!

#wrap
{
    width:100%;
    height:300px;
}

#src
{
 display:inline-block;
 width:auto;
 height:100%;
 border:1px #0f0 solid;
}
    
#bg
{
 display:inline-block;
 background-image:url(https://i.imgur.com/6672G7J.png);
 background-repeat:no-repeat;
 background-size:contain;
 width:auto;
 height:100%;
 border:1px #f00 solid;
}

<div id="wrap">
 <img id="src" src="https://i.imgur.com/6672G7J.png" />
 <div id="bg"></div>
</div>

That rabbit hole goes much much deeper -> https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images — Ronnie Royston, Feb 08 '18 at 23:10
I hate this rabbit hole. Worse yet, even if a standard was set, it'd take a while for browsers to adopt it. — Phil, Feb 08 '18 at 23:39

score 0 · Answer 1 · answered Feb 08 '18 at 22:50

0

If I understand you correctly... you can use background-size: cover; and then the image will fill the entire parent container without needing to specify a width or height

answered Feb 08 '18 at 22:50

Smokey Dawson

8,827
19
77
152

Cover didn't work when I had tried it. It required my div to have a width/height defined, unless I'm using it incorrectly? If it's the correct way, I certainly can't figure it out. – Phil Feb 08 '18 at 22:56

DavGarcia · Answer 2 · 2018-02-08T22:59:53.377

0

The trick is to set the div's height to 0 and then set the padding-top to a ratio of the height/width. See https://stackoverflow.com/a/22211990/40161

#bg
{
    display:inline-block;
    background-image:url(https://i.imgur.com/6672G7J.png);
    background-repeat:no-repeat;
    background-size:contain;
    width:100%;
    height:0;
    padding-top: 100%; (Height/Width)
    border:1px #f00 solid;
}

Note: I changed width to 100%. This will make it take up all available room. But if you want it 100px as your original example, you'd need a wrapper around the div to constrain the size. See https://jsfiddle.net/1x6p33f9/1/

edited Feb 08 '18 at 22:59

answered Feb 08 '18 at 22:52

DavGarcia

18,540
14
58
96

The 100px was a remnant of my testing. Sorry about that. As for the solution, it doesn't seem to work since I need to set a width (a width of 100% will obviously span the entire screen in my example). I will need a row of these images of varying widths. This is why I need width to be auto-calculated based on the height. – Phil Feb 08 '18 at 23:33
Once you have the div sized the same as the background image, are you going to put any other content in the div or would it just contain the background image? There isn't a way that I know of to have many divs automatically size themselves based on their arbitrary background image using just HTML and CSS. You probably want to dive into some JavaScript to accomplish your task. See https://stackoverflow.com/a/12784180/40161 – DavGarcia Feb 09 '18 at 21:27
Yeah, we may end up having a link in each div. I definitely want to avoid Javascript, so I might have to use img elements instead of using background images. Shame that the spec isn't quite there yet. – Phil Feb 10 '18 at 00:36
If you are able to use an img tag, that would be the simplest route. If you need to create overlays, you can do so using an absolutely positioned div. This is something bootstrap does, as an example: https://v4-alpha.getbootstrap.com/components/card/#image-overlays – DavGarcia Feb 14 '18 at 21:11
I ended up going for the img tag. I couldn't spend any more time trying to figure out how it's done. – Phil Feb 14 '18 at 22:50

score 0 · Answer 3 · answered Feb 08 '18 at 22:52

0

Are you looking for background-size: cover to have the largest dimension applied instead of the smaller?

answered Feb 08 '18 at 22:52

Katherine R

1,107
10
20

I've tried with cover and it didn't work for me. Thanks for the suggestion though! – Phil Feb 08 '18 at 22:57

Scalable background images with CSS

3 Answers3