How to get div height to auto-adjust to background size?

Question

How do I get a div to automatically adjust to the size of the background I set for it without setting a specific height (or min-height) for it?

Any help appreciated!

Answer 1

You can do it server side: by measuring the image and then setting the div size, OR loading the image with JS, read it's attributes and then set the DIV size.

And here is an idea, put the same image inside the div as an IMG tag, but give it visibility: none + play with position relative+ give this div the image as background.

Answer 2

There is no way to auto adjust for background image size using CSS.

You can hack around it by measuring the background image on the server and then applying those attributes to the div, as others have mentioned.

You could also hack up some javascript to resize the div based on the image size (once the image has been downloaded) - this is basically the same thing.

If you need your div to auto-fit the image, I might ask why don't you just put an <img> tag inside your div?

Answer 3

Maybe this can help, it's not exactly a background, but you get the idea:

<style>
div {
    float: left;
    position: relative;
}
div img {
    position: relative;
}

div div {
    position: absolute;
    top:0;
    left:0;
}
</style>

<div>
    <img src="http://antwrp.gsfc.nasa.gov/apod/image/0903/omegacen_davis.jpg" />
    <div>Hi there</div>
</div>