スケーラブルな背景のためのjQueryプラグインDIV

Question

私は研究を試みましたが、スケーラブルである間にdivに背景イメージを挿入できるようにする良いjQueryプラグインを思いつくことができませんでした。例えば、

が、私はそうのような4つの異なるdivを考えてみましょう：

<div id="one"> 

</div> 

<div id="two"> 

</div> 

<div id="three"> 

</div> 

<div id="four"> 

</div> 

各＃/ ID/divが独自のイメージを持っている必要がありますし、サイズを変更したり、ブラウザの幅と高さにスケーラブルでなければなりません。私はこれがIE7 +と互換性があることを望みます。スタックオーバーフローコミュニティが素晴らしいことができれば助けてくれるでしょう。

私はbackground-resize：divを100％使用することができますが、最新のブラウザでのみ動作することを知っています。

Answer 1

This link could help you with changing the body background to a scalar image.おそらく、あなたが持っている部門に同じ概念を適用できますか？

Answer 2

私はあなたを始めるために一緒に投げた何か。作成する前にdivのサイズを設定するか、幅と高さの2つの追加のパラメータを追加します。

(function($) { 
    $.fn.bgImage = function(src) { 
    var d=this; 
    var ht=d.html(); 
    var z=parseInt(d.css('z-index')); 
    if(!z) z=0; 
    var oImg=document.createElement('img'); 
    oImg.src=src; 
    oImg.style.width=d.width()+'px'; 
    oImg.style.height=d.height()+'px'; 
    oImg.style.position='absolute'; 
    oImg.style.zIndex=z; 
    d.html(''); 
    d.append('<div id="a" style="position:absolute;z-index:'+(z+1)+';">'+ht+'</div>'); 
    d.append(oImg); 
    }; 
})(jQuery); 

$('#one').bgImage('http://www.google.com/intl/en_ALL/images/logos/images_logo_lg.gif');