Set post thumbnail as background

Question

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??

Answer 1

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.')">';

Answer 2

There is now the get_the_post_thumbnail_url function provided in WordPress.

Usage example from the codex:

$featured_img_url = get_the_post_thumbnail_url(get_the_ID(),'full');

https://developer.wordpress.org/reference/functions/get_the_post_thumbnail_url/

Answer 3

Per WordPress Codex the the_post_thumbnail() function Display the post thumbnail. https://developer.wordpress.org/reference/functions/the_post_thumbnail/ But this output the whole image tag and not just the src, which in your case is needed.

Instead you should use the wp_get_attachment_image_src() function which Retrieve an image to represent an attachment.. https://developer.wordpress.org/reference/functions/wp_get_attachment_image_src/

So i suggest to try something like this:

//this retrieve the full version of image
$image_data = wp_get_attachment_image_src ( get_the_post_thumbnail( $post->ID), 'full' );
$image_url = $image_data[0];
echo '<li class="produkt" style="background: url('. $image_url .')">';

Answer 4

Try using background-size: cover, background-position: center and background-size: 300px 100px;

<?php
echo '<li class="produkt" style="background-image: url('<?php the_post_thumbnail_url(); ?>'); background-size: cover; background-position: center; background-repeat: no-repeat; background-size: 300px 100px;">';
?>

Answer 5

simply echo the post thumbnail url :

<li class="produkt" style="background-image: url(<?php echo the_post_thumbnail_url(); ?>);">></li>