How to Size a DIV to the Background Image in CSS

background-imagecsshtml

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.

Best Answer

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.

Related Question