画像を使ってdivの背景画像を設定するvar？

Question

どのように私はこれを行うことができます示唆することができます：
画像の変数を使用して、私はdivの背景を設定するが、画像のソース/ URLを使用しない。たとえば、これは動作しません：

var img = new Image(); 
img.onload = function() { 
    $('#div').css("background-image", img); 
} 
img.src = "http://example.com/image.jpg"; 

基本的に、私はそれがうまくDIVに合うように、背景画像の幅/高さを設定しようとしています。私は画像変数を使用することが唯一の方法だと考えましたが、そうでない場合は、どうすればいいのかをお勧めします。助けてくれてありがとう！ :)

Answer 1

あなたができることは、絶対配置されたimgを作成し、次にイメージ属性を使って幅と高さを設定することです。絶対に配置することで、他のコンテンツの後ろに表示することができます。

試してみてください。問題がある場合は、コードスニペットを入力してください.HTMLとCSSが正しく表示されます。

Answer 2

はこれを試してみてください：

var img = new Image(); 
img.onload = function() { 
    $('#div').css("background-image", "url(" + img.src + ")"); 
} 
img.src = "http://example.com/image.jpg"; 

また、onloadイベントは画像がキャッシュされている場合、それはロード・イベントを発生しないことがあり、画像をプリロードするために常に十分ではありません。

var img = new Image(); 
function imgLoaded() { 
    $('#div').css("background-image", "url(" + img.src + ")"); 
} 
img.onload = imgLoaded; 
img.src = "http://example.com/image.jpg"; 
if (img.complete || img.readystate === 4) { 
    imgLoaded(); 
} 

Answer 3

画像オブジェクトを使用する必要はありません。文字列として設定するだけです。例えば

var src = 'http://example.com/image.jpg'; 

$('#div').css('background-image', 'url(' + src + ')'); 

URLビットを追加することを忘れないでください;）

希望に役立ちます:)

編集

申し訳ありませんが、私はちょうどあなたがイメージオブジェクトを使用していたが実現しましたプリロードしてください...その場合でも、この：

var src = 'http://example.com/image.jpg'; 

$('<img/>').load(function(){ 

    $('#div').css('background-image', 'url(' + src + ')'); 

}).attr("src",src); 

そのトリックをする必要があります。

Answer 4

背景画像の幅/高さを設定することはできません。それを行う唯一の方法は、CSS3のbackground-sizeプロパティを使用するか、またはdivの内容の背後に絶対配置された画像を使用することです。