Set Background Image as per dynamic content?

Question

How to set the background-image according to the dynamic content .

My html code like below

<div class="main-div">
     <div class="content-div">

     </div>
</div>

if i am interpreting it right, when ever you set the dynamic content itself , may be using .html() function you can set the background also by using .css() function. if not you can use .html() to get the content and the go ahead with the rest of the steps — venkata krishnan, Sep 14 '17 at 10:04
How do you get the dynamic content? Its relation with the background image? Does the dynamic content keep on changing? Do you have this dynamic images saved?..... — gjijo, Sep 14 '17 at 10:29

score 0 · Answer 1 · answered Sep 14 '17 at 10:56

0

$(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>

answered Sep 14 '17 at 10:56

i can't fix teh height width of either main-div or content-div because content div may be auto-populate the large Text content or images etc – vjy tiwari Sep 14 '17 at 11:05
https://stackoverflow.com/questions/3029422/how-do-i-auto-resize-an-image-to-fit-a-div-container – Sep 14 '17 at 12:39

Set Background Image as per dynamic content?

1 Answers1