Javascript - Image change an resize to full background
<p>As a quick explanation, I created an image that resizes to fill the background using this function which works great:</p>

<pre><code>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&lt;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;
}
</code></pre>

<p>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.</p>

<p>Here is the code I use to change the image and resize it:</p>

<pre><code>$('#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();
});
</code></pre>

<p>Thanks for any help.</p>
