Question

As a quick explanation, I created an image that resizes to fill the background using this function which works great:

function resize_bg(element_id){

    $("#"+element_id).css("left","0");
    var doc_width = $(window).width();
    var doc_height = $(window).height();
    var image_width = $("#"+element_id).width();
    var image_height = $("#"+element_id).height();
    var image_ratio = image_width/image_height;      
    var new_width = doc_width;
    var new_height = Math.round(new_width/image_ratio);
    if(new_height<doc_height){
        new_height = doc_height;
        new_width = Math.round(new_height*image_ratio);
        var width_offset = Math.round((new_width-doc_width)/2);
        $("#"+element_id).css("left","-"+width_offset+"px");
    }
    $("#"+element_id).width(new_width);
    $("#"+element_id).height(new_height);

    return true;
}

So no problem for the full background image. The problem appears, when I change the image source using Javascript. In other words, I have 1 image set as background but on hover of certain elements on the page, the image changes but it doesn’t change the resize right. So the first image on load is resized and positioned correctly, but when I switch the image using .attr(‘src’,newimg) the image is not resized correctly even though I call the function again.

Here is the code I use to change the image and resize it:

$('#menu_work li a').hover(function(){
    $('#content').hide();
    var img_src = $(this).next('img').attr('src');
    $('#full_screen_img').attr('src', img_src );
    resize_bg();
    $('#full_screen_img').show();
},function(){
    $('#full_screen_img').hide();
    $('#content').show();
});

Thanks for any help.

Answer 1

@maxedison is right, you forgot to pass the element id.

Another problem is that when you change the src, the new image might not be loaded yet, so you won’t get the right dimensions in resize_bg until it is.

In that case you’ll need to resize the image once it’s loaded:

$('#full_screen_img').attr('src', img_src ).load(function() {
    resize_bg('<ELEMENT_ID>');
});
resize_bg('<ELEMENT_ID>');

---

On another note, I’d recommend you change resize_bg to get a jQuery object instead of an id, or even write a plugin ($.fn.resize_bg) if it’s a functionality you want to use often.