Set post thumbnail as background

by

I have a single page for my products where all products get listed. This is how i’ve archieved it:

<ul class="produkte">
    <?php $args = array( 'post_type' => 'produkte', 'posts_per_page' => 30 );

    $loop = new WP_Query( $args );
    while ( $loop->have_posts() ) : $loop->the_post();
        echo '<li class="produkt">';
        echo '<a href="' . get_permalink() . '">';
        echo '<div class="produkt-info">';
        the_title('<h3>', '</h3>');
        if (has_post_thumbnail()) {
            echo '<figure class="imgBox">';
           the_post_thumbnail('full', array('class' => 'img-resp') );
           echo "</figure>";
        }
        echo '</div>';
        echo '</a>';
        echo '</li>';
    endwhile; ?>
</ul>

I decided that i want to set the post thumbnail as the background-image of the li.produkt. When i do something like this:

echo '<li class="produkt" style="background: url('.the_post_thumbnail().')">';

The page generates an image-element above the li-element. What am i doing wrong??

5 Answers
5

The problem here is the_post_thumbnail() doesn’t return image url but the img tag.

You can use this code

$url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
echo '<li class="produkt" style="background: url('. $url.')">';

Leave a Comment