Como carregar imagem dinamicamente pelo jQuery e redimensionar

[Spyder.RV 0]

Pessoal, estou tentando carregar uma imagem dinamicamente com jQuery e atribuir como fundo de uma div. Essa div ocupa todo o espaço restante da página e é claro pode alterar conforme a resolução...

 

Então minha idéia é carregar a imagem, pegar suas dimensões e reduzir o tamanho proporcionalmente só então adicionar como fundo da div... o problema é que tento pegar as dimensões da imagem carregada e tá vindo zerado.

 

Ah, e também ao tentar atribuir a imagem para o fundo, não tá dando certo.

 

var img = new Image();
$(img).load(function(){

console.log("Largura: " + $(this).width() );
console.log("Altura: " + $(this).height() );

// Cálculo do redimencionamento proporcional da imagem, ainda a ser feito.

$('#home').css('background-image', $(this).attr('src') );
}).attr('src', 'images/home-bg.jpg');

 

 

Alguma dica de como resolver?

[Vadio 13]

http://jsfiddle.net/eric_freitas/24Daa/

[Spyder.RV 0]

http://jsfiddle.net/..._freitas/24Daa/

 

Bom dia Vadio... testei o código que você passou... o problema é que quero redimensionar a imagem antes de adicionar ao fundo... adicionar ao fundo normalmente é fácil... o problema é que quando se usa $('#home').css('background-image', 'url('+$(this).attr('src')+')'); vai adicionar o source ao fundo, ou seja; a imagem sem ser redimensionada.

 

--------------

Editado:

 

Achei um plugin interessante que faz isso... o BackStrech ( http://srobbin.com/jquery-plugins/backstretch/ ).

 

Porém só funciona no IE9, então preciso rodar uma alternativa para IE8 e IE7. Alguem pode dar uma força em como resolver!?