2017-09-14 15 views
-1

動的コンテンツに基づいて背景イメージを設定する方法。動的コンテンツごとに背景画像を設定しますか?

あなたがこれまでに試してみました何
<div class="main-div"> 
    <div class="content-div"> 

    </div> 
</div> 
+0

以下のような私のhtmlコードは? –

+0

どのように動的コンテンツを特定していますか? – lpradhap

+0

私はそれを正しく解釈していれば、いつでも動的コンテンツ自体を設定し、.html()関数を使っているかもしれません。また、.css()関数を使って背景を設定することもできます。 .html()を使用してコンテンツを取得し、残りのステップを進めることができない場合 –

答えて

1

$(document).ready(function() { 
 
    var imageUrl = 'https://www.stoneycreekhunting.co.nz/2_Key_Features_Rainwear_Insulation.png'; 
 

 
    $("<div class='dynamic-element'/>", { 
 
    text: "" 
 
    }).appendTo(".content-div"); 
 

 
    $('.dynamic-element').css({ 
 
    'background-image': 'url('+imageUrl+')', 
 
    'background-size': 'cover', 
 
    'height': '100%' 
 
    }); 
 
});
.content-div { 
 
    height: 100%; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div style="width:120px;height:120px;" class="main-div"> 
 
    <div class="content-div"> 
 

 
    </div> 
 
</div>

+0

コンテンツdivが大きなテキストコンテンツや画像などを自動入力する可能性があるため、main-divまたはcontent-divの高さの幅を修正できません –

+0

https:/ /stackoverflow.com/questions/3029422/how-do-i-auto-resize-an-image-to-fit-a-div-container – anu

関連する問題