Question

I would like to automatically resize div according the background-image size.

Is that possible with css?

I also need to update the background-image using jquery.

Until now I have: Resize div

Updated: JSFiddle link: Updated Link Is it easier to place the hand above the image element instead of setting a background-image for the div?

Answer 1

With css no there is no way to currently do this at the moment you can do it with javascript as shown below.

To set a background image

$("#yourdiv").css("background-image", "your url");

To get background image height or width is a real pain something like this should work

$.fn.getBgImage = function(callback) {
    var height = 0;
    var path = $(this).css('background-image').replace('url', '').replace('(', '').replace(')', '').replace('"', '').replace('"', '');
    var tempImg = $('<img />');
    tempImg.hide(); //hide image
    tempImg.bind('load', callback);
    $('body').append(tempImg); // add to DOM before </body>
    tempImg.attr('src', path);
    $('#tempImg').remove(); //remove from DOM
};


// usage
$("#background").getBgImage(function() {
    console.log($(this).height());
});