Set background-image css to the featured image in wordpress using jQuery

Question

for reference http://vvcap.net/db/Bs03ucQSrylV5LBiWduY.htp here's a thumbnail of featured image of a post http://vvcap.net/db/_45qWkuQwluTrYF51tFn.htp 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"

CSS: currently this is the only css that styles the div bg. (this should be replaced)

 section > div { background:#00c8e8;}

Compiled source HTML the second section posts a featured image(ontop of div) as example. First section has no featured image.

<section  class="resource">
   <div> 
        <a href="http://localhost/dov1/?custom_type=logo-design" rel="bookmark" title=" Logo Design">Logo Design</a>
  </div>
</section>

<section  class="resource">
  <div> 
        <a href="http://localhost/dov1/?custom_type=test" rel="bookmark" title=" Magazine Spread">Magazine Spread</a>

            <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" />     
 </div>
</section>

HTML/PHP

<?php 

        $args = array(  
        'post_type' => 'custom_type', 
        'posts_per_page' => '-1' 
        );

        $loop = new WP_Query( $args );

        while ( $loop->have_posts() ) : $loop->the_post(); ?>
            <section  class="resource">
              <div> 
          <a href="<?php the_permalink() ?>" rel="bookmark" title=" <?php the_title_attribute(); ?>">
                <?php the_title(); ?>
                <?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();
        } 
        ?>
    </a> </div>
</section>
<?php endwhile; ?>

I'm not very strong with jQuery or php. Luckily, the logic to this process makes sense.

1. Loop the posts (check)
2. Test to see if posts have featured image (check)
3. Execute jQuery to replace the background images with the_post_thumbnail();
4. Profit!

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!

Matthew

UPDATED HTML SOURCE

   <section  class="resource">

      <div> 

            <a href="http://localhost/dov1/?custom_type=test" rel="bookmark" title=" Magazine Spread">Magazine Spread</a>

            <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" />      </div>

    </section>

Answer 1

Assuming that there's only one img element per section element, and that you wish that image to become the background-image of the parent div of the img:

$('section img').each(
    function(){
        var src = this.src,
            h = $(this).height(),
            w = $(this).width();
        $(this).closest('div').css({
            'min-width' : w,
            'min-height' : h,
            'background-image' : 'url(' + src + ')',
            'background-repeat' : 'no-repeat',
            'background-position' : '50% 50%'
        });
    }).remove();​

JS Fiddle demo.

References:

• css().
• each().
• height().
• remove().
• width().

Answer 2

By the looks of the Codex you can just pass that information as the second parameter.

CSS

.post-thumbnail {
    background:#00c8e8;
}

PHP

$size = array( 32, 32 );
$attr = array( 'class' => 'post-thumbnail' );
the_post_thumbnail( $size, $attr );

---

In order to make the post thumbnail a background I would use get_the_post_thumbnail()

<?php $bg = wp_get_attachment_image_src( get_post_thumbnail_id($post_id, $size, $attr)); ?>
<div style="background: <?php echo $bg; ?>;">...</div>

You would have to pass the parameters you want to it - specific post ids or whatever.