title: Set background-image css to the featured image in wordpress using jQuery
body: <p>for reference
  <a href="http://vvcap.net/db/Bs03ucQSrylV5LBiWduY.htp" rel="nofollow">http://vvcap.net/db/Bs03ucQSrylV5LBiWduY.htp</a> here's a thumbnail of featured image of a post
  <a href="http://vvcap.net/db/_45qWkuQwluTrYF51tFn.htp" rel="nofollow">http://vvcap.net/db/_45qWkuQwluTrYF51tFn.htp</a> here's a square i want to set the background-image of.  The small square is made from a post loop (shown below).  Inside the loop is a a check to see if the post as a "featured image attracted" </p>
  
  <p><strong>CSS:</strong> currently this is the only css that styles the div bg. (this should be replaced)</p>
  
  <pre><code> section &gt; div { background:#00c8e8;}
  </code></pre>
  
  <p><strong>Compiled source HTML</strong> the second section posts a featured image(ontop of div) as example. First section has no featured image.</p>
  
  <pre><code>&lt;section  class="resource"&gt;
     &lt;div&gt; 
          &lt;a href="http://localhost/dov1/?custom_type=logo-design" rel="bookmark" title=" Logo Design"&gt;Logo Design&lt;/a&gt;
    &lt;/div&gt;
  &lt;/section&gt;
  
  &lt;section  class="resource"&gt;
    &lt;div&gt; 
          &lt;a href="http://localhost/dov1/?custom_type=test" rel="bookmark" title=" Magazine Spread"&gt;Magazine Spread&lt;/a&gt;
  
              &lt;img width="125" height="125" src="http://localhost/dov1/wp-content/uploads/2012/03/project2_web-125x125.jpg" class="attachment-post-thumbnail wp-post-image" alt="project2_web" title="project2_web" /&gt;     
   &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p><strong>HTML/PHP</strong></p>
  
  <pre><code>&lt;?php 
  
          $args = array(  
          'post_type' =&gt; 'custom_type', 
          'posts_per_page' =&gt; '-1' 
          );
  
          $loop = new WP_Query( $args );
  
          while ( $loop-&gt;have_posts() ) : $loop-&gt;the_post(); ?&gt;
              &lt;section  class="resource"&gt;
                &lt;div&gt; 
            &lt;a href="&lt;?php the_permalink() ?&gt;" rel="bookmark" title=" &lt;?php the_title_attribute(); ?&gt;"&gt;
                  &lt;?php the_title(); ?&gt;
                  &lt;?php 
              // check if the post has a Post Thumbnail assigned to it. 
          if ( has_post_thumbnail() ) 
              { 
            //run jQuery here (prob replace the_post_thumbnail();)
                the_post_thumbnail();
          } 
          ?&gt;
      &lt;/a&gt; &lt;/div&gt;
  &lt;/section&gt;
  &lt;?php endwhile; ?&gt;
  </code></pre>
  
  <p>I'm not very strong with jQuery or php. Luckily, the logic to this process makes sense.</p>
  
  <ol>
  <li>Loop the posts (check)</li>
  <li>Test to see if posts have featured image (check)</li>
  <li>Execute jQuery to replace the background images with the_post_thumbnail();</li>
  <li>Profit!</li>
  </ol>
  
  <p>Where we run into another caveat is how do we distinguish and assign the distinguished the proper background image?  I only have 1 form fitting css style.  It would make sense if it treated the process per entry.  Unfortunately, wouldn't it rewrite over each entry?  I know this is a big question stack but please I'll love you forever for the help!</p>
  
  <p>Matthew</p>
  
  <p><strong>UPDATED HTML SOURCE</strong></p>
  
  <pre><code>   &lt;section  class="resource"&gt;
  
        &lt;div&gt; 
  
              &lt;a href="http://localhost/dov1/?custom_type=test" rel="bookmark" title=" Magazine Spread"&gt;Magazine Spread&lt;/a&gt;
  
              &lt;img width="125" height="125" src="http://localhost/dov1/wp-content/uploads/2012/03/project2_web-125x125.jpg" class="attachment-post-thumbnail wp-post-image" alt="project2_web" title="project2_web" /&gt;      &lt;/div&gt;
  
      &lt;/section&gt;
  </code></pre>