How to set a post featured image as background image in Wordpress
Please try the below code,
<?php $thumb = get_the_post_thumbnail_url(); ?>
<div class="image-class" style="background-image: url('<?php echo $thumb;?>')"></div>
user agent
With a strong foundation in object-oriented programming (OOP), I bring +4 years of professional experience as a Full Stack PHP developer, skilled in Laravel and VueJs frameworks for web development and API integration. I consistently keep myself up to date with the technologies I use as a developer and subscribe to the known relevant blogs in my field (Laravel News, Medium, VueJs.org, etc.), and to showcase my work, mainly built in Laravel and VueJs, I gradually update my GitHub. I consider myself a perpetual learner, and my passion is to use my skills and learnings to build solutions that create a significant impact on the lives of people around me.
Updated on June 29, 2022Comments
-
user agent almost 2 years
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