Is there any actual way to pull in a featured image from a blog post into a div on another page template as a background image.

I am trying to add a grid of blog posts to my homepage template. I have pulled in the content from 4 blog posts, now I just need to pull in the featured image as a background for each div.

Here is my current, half finished code, the background inline style isnt actually working right now, and I can’t figure out why.

    <?php /* Template Name: Home Content Template*/ ?>
<?php get_header(); ?>


<div class="row show-grid lrds-hm-grd-wrppr">
  <div class="span1 lrds-hm-grd-bx lrds-hm-grd-bx-1" data-original-title=""  title="" style="background:URL(<?php the_post_thumbnail_url( 'full' ); ?>) center center;  background-size: cover;   background-repeat: no-repeat;">
    <?php
    $post_id = 172;
    $queried_post = get_post($post_id);
    ?>
    <h2><?php echo $queried_post->post_title; ?></h2>
    <?php echo $queried_post->post_content; ?>
    <?php if (has_post_thumbnail( $post->ID ) ): ?>
      <?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
      <div id="custom-bg" style="background-image: url('<?php echo $image[0]; ?>')">

      </div>
    <?php endif; ?>
  </div>

  <div class="span2 lrds-hm-grd-bx lrds-hm-grd-bx-2" data-original-title="" title="" style="background:URL(<?php the_post_thumbnail_url( 'full' ); ?>) center center;   background-size: cover;   background-repeat: no-repeat;">
    <?php
    $post_id = 174;
    $queried_post = get_post($post_id);
    ?>
    <h2><?php echo $queried_post->post_title; ?></h2>
    <?php echo $queried_post->post_content; ?>
  </div>

  <div class="span3 lrds-hm-grd-bx lrds-hm-grd-bx-3" data-original-title="" title="" style="background:URL(<?php the_post_thumbnail_url( 'full' ); ?>) center center;   background-size: cover;   background-repeat: no-repeat;">
    <?php
    $post_id = 176;
    $queried_post = get_post($post_id);
    ?>
    <h2><?php echo $queried_post->post_title; ?></h2>
    <?php echo $queried_post->post_content; ?>
  </div>

  <div class="span4 lrds-hm-grd-bx lrds-hm-grd-bx-4" data-original-title="" title="" style="background:URL(<?php the_post_thumbnail_url( 'full' ); ?>) center center;   background-size: cover;   background-repeat: no-repeat;">
    <?php
    $post_id = 210;
    $queried_post = get_post($post_id);
    ?>
    <h2><?php echo $queried_post->post_title; ?></h2>
    <?php echo $queried_post->post_content; ?>
  </div>
</div>

  <div class="row">
    <div class="col-md-2">

    </div>

    <div class="col-md-8">

      <?php if(have_posts()) : ?>
         <?php while(have_posts()) : the_post(); ?>
        <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
          <?php the_title('<h2>','</h2>'); ?>
          <?php the_content(); ?>
        </div>

      <?php
          // tags anyone?
          the_tags();

        ?>
         <?php endwhile; ?>

      <?php if (!is_singular()) : ?>
        <div class="nav-previous alignleft"><?php next_posts_link( 'Older posts' ); ?></div>
        <div class="nav-next alignright"><?php previous_posts_link( 'Newer posts' ); ?></div>
      <?php endif; ?>

      <?php else : ?>

      <div class="alert alert-info">
        <strong>No content in this loop</strong>
      </div>

      <?php endif; ?>

    </div>

    <div class="col-md-2">

      <?php
       if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Sidebar')) : //  Sidebar name
      ?>
      <?php
           endif;
      ?>
    </div>

  </div>

<?php get_footer(); ?>

Read more here: Is there any actual way to pull in a featured image from a blog post into a div on another page template as a background image.

Wordpress related questions and answers: