How to set a post featured image as background image in Wordpress

10,567

Please try the below code,

<?php $thumb = get_the_post_thumbnail_url(); ?>
<div class="image-class" style="background-image: url('<?php echo $thumb;?>')"></div>
Share:
10,567
user agent
Author by

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, 2022

Comments

  • user agent
    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