title: Load an img src as a background image for the Div it resides in with jQuery
body: <p>I'm working with SharePoint and I have to deal with a few corporate issues in using Open Source... plus have to make the site easy for someone to edit. I'm using jQuery and Cycle v.3.0.2 to run a slider. I'm about to rip apart my slider to allow it to use captions, so I will use an individual div per slide. I want to have an img element and a text element to run as a caption, and since the slider is full width, I'd love it if I can pull that img tag's src attribute and apply it to the overall div as a background image when the particular slide loads. Is there a way to make this happen? I see the coding being like this: </p>
  
  <pre><code>&lt;div id="slider"&gt;
  &lt;div class="sliderIMG"&gt;
      &lt;img src="http://urURL.com/img1" /&gt;
      &lt;h4&gt;Your Caption for Slider &lt;a class="button" href="#" target="_blank"&gt;Button&lt;/a&gt;&lt;/h4&gt;
  &lt;/div&gt;
  &lt;div class="sliderIMG"&gt;
      &lt;img src="http://urURL.com/img1" /&gt;
      &lt;h4&gt;Your Caption for Slider &lt;a class="button" href="#" target="_blank"&gt;Button&lt;/a&gt;&lt;/h4&gt;
  &lt;/div&gt;
  &lt;div class="sliderIMG"&gt;
      &lt;img src="http://urURL.com/img1" /&gt;
      &lt;h4&gt;Your Caption for Slider &lt;a class="button" href="#" target="_blank"&gt;Button&lt;/a&gt;&lt;/h4&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>Is there a way that I can call it to add a style tag to the .sliderIMG div and add the background image inline using the img src that resides in the this div? Also, there is a class for the active slide named 'active' if that helps me in getting the correct src attribute.  </p>