A div that adapts to its background

A div that adapts to its background



Is it possible to make a div adapt to the img that its in the background?

Clarification:

I do not mean to make the background adapt to the div. This is possible

with "background-size". But what I am asking is the way round: to have a

img in the background and make the div parent adapt to that img whatever

its size is.

I know that I can do something similar if I put the img in the html, and

not in the background. But in this case I could change the img for

different devices sizes. So I am asking to put the img in background to be

able to change it with css.)

In the example I give, I can make the img adapt to the width but I get a

gap with the height

Here is the example to play:http://jsfiddle.net/bH5JZ/1/

CSS:

#image {

margin:0px auto;

width:90%;

max-width:512px;

height:512px; /* I need to give heigt to make it visible? */

background-image:url('http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png');

background-repeat:no-repeat;

background-size:100%;

background-color:yellow;

}

HTML:

<div id="image" ></div>