Size the DIV to the size of the background image

Question

I have a DIV with the following style

.vplayer-container .logo
{
 position: absolute;
 bottom: 50px;
 right: 10px;
 background: url(../img/logo.png) no-repeat;
 border: 1px solid #000000;
 max-width: 50px;
 max-height: 50px;
}

I want that the DIV size is the same as the background image. Since the bg image change, I want it to be set automatically. I can use JavaScript, but I'd prefer a CSS way for that.

I'm targeting HTML5 browsers that is FireFox, Webkit and Opera.

Thanks

Answer:

With Kyle Sevenoaks hint, you can do it by putting an image element inside the DIV.

<div>
<img src="url">
</div>

Remove the Background property and no other styling is needed.

Answer 1

CSS can't do this, the div gets its dimensions from the content within it. The background image is purely a mark of styling.

You should be able to do this with Javascript, finding the height and width values and injecting them into an inline style should do it :)

You can also use an <img> tag within the .logo div. This would produce what you intend.

Answer 2

CSS cannot do that for background image.

Answer 3

This is impossible with pure CSS. I think you need to do it with JavaScript. Do you really need this to be dynamic? I think it is less work to change two values in the stylesheet if the logo changes.