How do you use the featured image of the most recent post in a category as the background image

Question

I want to display the most recent article title, possibly an excerpt, in a specific category in a specific div on my front page. I also want to use the featured image from that post as the background for the div. Is there any way to do this? The current display of that DIV looks like this:

<div class="Header_Section_Left"><span class="Category_Header_Title">ACADEMY AWARDS<br /></span><div id="Header_Upper_Left">

<?php
$cinemasight_header_query = new WP_Query( array( 
    'category_name' => 'academy-awards',
    'posts_per_page' => 3 
) );

if ($cinemasight_header_query->have_posts()) :
while($cinemasight_header_query->have_posts()) :
    $cinemasight_header_query->the_post();

if( 0 == $cinemasight_header_query->current_post ) :
  $thumbnail_id = get_post_thumbnail_id();
  $image_src = wp_get_attachment_image_src( $thumbnail_id );?>

<div class="Categories_Upper_Left">
  <a href="<?php the_permalink() ?>"><?php echo the_title(); ?></a>
</div>

  <?php continue;
endif;?>

<span class="Categories_Upper_Left">
<a href="<?php the_permalink() ?>"><?php the_title(); ?></a><br />
</span>

<?php endwhile;

endif;

wp_reset_postdata();?>
</div>

I tried to insert the following into the Header_Upper_Left div above, but nothing shows up. If I put it down in the Categories_Upper_Left div, it does display a background image, but only for the URL of that post link only.

  style="background-image: url( '<?php echo $image_src[0]; ?>') ;"

Is there something I'm doing wrong, or another call that I need to make within the div to get it to work?

Here's the solution that resolved my issue. I've posted only the relevant section of the content to avoid clutter. Essentially, I just moved the Header_Section_Left DIV block to the point in the script after it pulls the image information. I've also added a separate bit of code that we discussed in comments below to pull the full image and not just the small thumbnail of it.

if( 0 == $cinemasight_header_query->current_post ) :
  $thumbnail_id = get_post_thumbnail_id();
  $image_src = wp_get_attachment_image_src( $thumbnail_id $size = 'full');?>

<div class="Header_Section_Left"><span class="Category_Header_Title">ACADEMY AWARDS<br /></span><div id="Header_Upper_Left">

<div class="Categories_Upper_Left">
  <a href="<?php the_permalink() ?>"><?php echo the_title(); ?></a>
</div>

Answer 1

$image_src doesn't exist yet when the "Header_Upper_Left" div appears. So, you'd need to place the code for deriving whichever image you want to have used before you actually use $image_src.

There are a couple of ways to do this. One way that a lot of themes do it - like ones that have a top "Featured Post" or "Posts" format, is to start the query, get only the most recent post (and its data, attachments, whtaever), then rewind the query if you're using it as main loop and displaying the same post again.

The alternative would be just to separate the special div from the main query, and use a separate query or a wrapper like get_posts() or wp_get_recent_posts(), to get the post ID, and then use the post ID to get the attachment ID.