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

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?

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

Leave a Reply

Your email address will not be published. Required fields are marked *