I created a section where I display all my post content. My struggle is now to set the post thumbnail as a background image.
Here the structure of the section:
<section id="testimonials">
<div class="testimonials-container">
<div class="heading-container">
<h3 class="page-title">Testimonials</h3>
</div>
<div class="testimonials-box">
<?php
$queryposts = array(
'post__in' => array(75,73),
'post_type' => 'post',
'posts_per_page' => -1,
'order' => 'ASC'
);
$lastblog = new WP_Query( $queryposts );
if($lastblog->have_posts() ):
while($lastblog->have_posts()): $lastblog->the_post(); ?>
<div class="testimonial-wrapper">
<div class="testimonial-item">
<p class="test-content"><?php the_content(); ?></p>
<p class="test-title"><?php the_title(); ?></p>
<?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );?>
<div class"image-class" style="background-image: url('<?php echo $thumb['0'];?>')"></div>
</div>
</div>
<?php endwhile;
endif;
wp_reset_postdata();
?>
</div>
</div>
</section>
Here my css:
section#testimonials {
height: 400px;
background-image: url(images/testimonials-bg.jpg);
background-size: cover;
background-repeat: no-repeat;
text-align: center;
}
.testimonial-wrapper {
width: 100%;
max-width: 900px;
margin: 0 auto;
}
.image-class{
display: block;
width: 125px;
height: 125px;
background-size: cover;
background-repeat: no-repeat;
}
When I try to view the page the image does not show and tying to inspect the page it shows this:
background-image: url((unknown));
How can I set the thumbnail as background image of my div box?
Hope you can help