title: jQuery replace image with div and set image to background
body: <p>I have a div of images.. eg:</p>
  
  <pre><code>&lt;div class="image-container"&gt;
      &lt;img width="174" height="174" src="http://mysite.com/images/portfolio/p1.jpg" class="image-style" typeof="foaf:Image"&gt;
      &lt;img width="174" height="174" src="http://mysite.com/images/portfolio/p2.jpg" class="image-style" typeof="foaf:Image"&gt;
      &lt;img width="174" height="174" src="http://mysite.com/images/portfolio/p3.jpg" class="image-style" typeof="foaf:Image"&gt;
      &lt;img width="174" height="174" src="http://mysite.com/images/portfolio/p4.jpg" class="image-style" typeof="foaf:Image"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and I want to use jQuery to go through each image and make it a div then asign the image as a background image... like this:</p>
  
  <pre><code>&lt;div class="image-container"&gt;
          &lt;div style="background-image:url(http://mysite.com/images/portfolio/p1.jpg)"&gt;&lt;span&gt;image&lt;/span&gt;&lt;/div&gt;
          &lt;div style="background-image:url(http://mysite.com/images/portfolio/p2.jpg)"&gt;&lt;span&gt;image&lt;/span&gt;&lt;/div&gt;
          &lt;div style="background-image:url(http://mysite.com/images/portfolio/p3.jpg)"&gt;&lt;span&gt;image&lt;/span&gt;&lt;/div&gt;
          &lt;div style="background-image:url(http://mysite.com/images/portfolio/p4.jpg)"&gt;&lt;span&gt;image&lt;/span&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I know how to do this for one but not sure the best way to go through all the images in my parent div (<code>image-container</code>) and convert them.</p>
  
  <p>Any help will be very much appreciated.
  C</p>