title: Dynamically add background images to multiple elements
body: <p>I have a list of images I want to display. The images have different widths and heights , and I want to put them all into a li element, but the li element should have the same dimensions for each child image. </p>
  
  <p>The only way to to this(so that images will fit in the the standard size li box) is to specify the image as a background of the li element:</p>
  
  <pre><code>&lt;ul&gt;
        &lt;li&gt;
          &lt;div&gt;&lt;/div&gt;
          &lt;span&gt;Image1&lt;/span&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;div&gt;&lt;/div&gt;
          &lt;span&gt;Image2&lt;/span&gt;
        &lt;/li&gt; 
        &lt;li&gt;
          &lt;div&gt;&lt;/div&gt;
          &lt;span&gt;Image3&lt;/span&gt;
        &lt;/li&gt; 
        &lt;li&gt;
          &lt;div&gt;&lt;/div&gt;
          &lt;span&gt;Image4&lt;/span&gt;
        &lt;/li&gt;   
      ...and many more  
  &lt;/ul&gt; 
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>ul li {       
          width: 75px;  
          height: 75px;
        }
  
  
  ul li div{
          background-image: url('genereic path calculated in jquery');
          background-size: contain;  /*IMPORTANT THIS!*/
        }
  </code></pre>
  
  <p>All images should be resized to 75 by 75...So that the the images fits the box - That is why I am using background image property...</p>
  
  <p>Basically, I can do this for each image, but I have a lot of images...So I will need to specify a background image for each list item child div...</p>
  
  <p>How can I dynamically add this background image for each new li>div?</p>
  
  <p>Example:</p>
  
  <pre><code>$(function() {
  
      $( "li div" ).each(function() {
        $(this).css('background-image','url(images/' + 'imagetitle)');
    });
  });
  </code></pre>
  
  <p>How can I make this dymamic, without having to specify a background image for each div...</p>
  
  <p>Thank you!</p>