Home/ Questions/Q 7950315
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T02:13:54+00:00

It’s possible to write CSS that stretches a container’s background image to fit the

  • 0

It’s possible to write CSS that stretches a container’s background image to fit the container. But is it possible to do the reverse, that is, write CSS that makes the container resize to fit the background image?

In the past I have used an ugly hack using JQuery (which I’m not happy with, because it depends on the dimensions of the image actually being specified in the image’s filename). So my strong preference is to do this using CSS, but if that’s not possible, then I’d also be happy with the cleanest possible Javascript/JQuery solution.

(Side note: this no doubt seems like an odd thing to want to do. The reason is that I’m working with a rendering engine that spits out an image sized according to certain device parameters.)

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I don’t think it is possible with just css, but I’m not one to say much of anything is impossible. I’m not sure what your use-case is but you could embed an img tag inside the element you are setting the background of. Setting the src of the img tag to the same picture will force the browser to render the parent element at the same dimensions.

    Using css you could then render the element hidden, and the background element will render full size. You could also use jQuery to dynamically inject a hidden img element with the same background image set on the wrapper element.

    <!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        div .img { visibility: hidden; }
        div { background: url(img.jpg) top left no-repeat; }
    </style>
</head>
<body>
    <div><img src="img.jpg" /></div>
</body>
</html>

    The main consequence of this method is that IE and perhaps other browsers will download the image twice. Chrome is smart enough to avoid that problem. But I didn’t test FF, Safari or Opera.

    • 0