Resize a div element to its background image size - html

Question

Is it possible to make a <div> adapt to its background image? I mean to maintain the proportions width and height.
Clarification:
The div change the width. (it is a responsive design)
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 image in the background and make the div parent adapt to that image whatever its size is.
I know that I can do something similar if I put the image in the html, and not in the background. But in this case, I could not change the image for different device sizes. So I am asking to put the image in background to be able to change it with CSS.
In the example I give, I can make the image adapt to the width but I get a gap with the height. Can I make the div adapt to the height too of the image , as the image changes its size? Asked in another way: In a responsive environment, can a div with an image background, change in size without leaving empty spaces ?
Here is the example to play.
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;/*just to make visible the gap in the height*/
}
HTML:
<div id="image"></div>

Answer 1

No it is NOT possible to adapt a div to it's background image.
Because it is 'senseless'
This is how:
A div's size is determined by its "content", or if its dimensions are SPECIFICALLY set.
Since the background-image does not fall into any of these categories, you can see that it's impossible.
What you CAN do is this:
HTML
<div class="image-controlled">
<img>...</img>
<div class="content">...</div>
</div>
CSS
.image-controlled {
position: relative;
overflow: hidden <-- optional, if you want to cut off .content which overflows the image boundaries
}
.content {
position: absolute;
top: 0; left: 0; <-- position of the content as it should be (normally)
}
The div will now be the size of the image, and the .content will be shown over it.
Also note that the .content div can come above or below the <img> in order of appearance, but the effect would be the same. But, if you apply a position property on the img element too, then you'll need to set the z-index of .content greater than that of <img>

Answer 2

By using CSS, It's not possible to change an element's dimension according to its background-image size, to achieve this, you should use JavaScript:
HTML:
<div id="image"></div>
JavaScript:
var
img = document.getElementById('image'),
style = img.currentStyle || window.getComputedStyle(img, false),
imgSrc = style.backgroundImage.slice(4, -1),
image = new Image();
image.src = imgSrc;
img.style.width = image.width + 'px';
img.style.height = image.height + 'px';
JSFiddle Demo
Update: jQuery version
Here is the the jQuery version.
var
img = $('#image'),
imgSrc = img.css('background-image').slice(4, -1);
$('<img />')
.attr('src', imgSrc)
.on('load', function() {
img.width(this.width);
img.height(this.height);
});
JSFiddle Demo #2

Answer 3

Yes. We can make background image adapt to its div, like make it responsive too.
Tips for a responsive background image:
background-size:cover-set bg image to background-size cover
-in css the padding set to percentage both top and bottom
-make the bg image no repeat
see this link: https://jsfiddle.net/beljems/dtxLjmdv/

Answer 4

Maybe using javascript, you can get the url to the image:
var img = document.getElementById('image').style.backgroundImage;
var width = img.clientWidth;
var height = img.clientHeight;
document.getElemetById('image').style.width = width;
document.getElemetById('image').style.height = height;
I strongly suspect you cannot do this exclusively with stylesheets.

Answer 5

Ok, my solution is a little bit tricky, but it works. It's a javascript and involve jquery as you wanted. The idea is to create a new image, add it to the DOM, waits till it loads and gets its dimensions. After that the new image is removed and the width and height are applied to the original img tag. Here is a js fiddle demonstrating the workaround http://jsfiddle.net/krasimir/bH5JZ/5/
And here is the code:
$(document).ready(function() {
var image = $("#image");
var imageurl = image.css("background-image").replace(/url/, '').replace(/\(/, '').replace(/\)/, '');
var body = $("body");
var newimage = $('<img src="' + imageurl + '" />');
newimage.css("display", "none");
body.append(newimage);
newimage.on("load", function() {
var w = $(this).width();
var h = $(this).height();
image.css("width", w);
image.css("height", h);
newimage.remove();
});
});
And the css:
#image {
margin: 0px auto;
background-image:url('http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png');
background-repeat:no-repeat;
background-size:100%;
background-color:yellow;
}

Answer 6

The easiest thing to do that doesn't need any javascript is to set your image as the background image and then make a .gif or a .png of the same size that you set as an overlay image in that div. That transparent .png or .gif will size the div. Transparent .png or .gif are only a couple of KB and your page will complete loading faster than with javascript.
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-image:url("myImage.jpg");
background-size:100% auto;
}
</style>
</head>
<body>
<div><img alt="" src="myOverlay.png"></div>
</body>
</html>