在我自己的 wordpress 主题中添加 the_post_thumbnail 作为 CSS 背景

Question

I am trying to setup my blog homepage to show the featured image and the title, so far everything is coming out fine except for some reason my code to add in the image is having issues even trying to follow what many other posts here have seemed to answer. Here is my code:

<div class="blogContainer">
<?php
  while(have_posts()) {
    the_post();?>
    <?php $thumb = get_the_post_thumbnail_url(); ?>
    <div class="blogItems" style="background-image: url('<?php echo $thumb;?>')">
      <a href="<?php the_permalink(); ?>"><h4><?php the_title();?></h4></a>
    </div>
<?php } ?>

I've tried a couple small variations such as this:

    <?php
  while(have_posts()) {
    the_post();?>
    <?php $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>
    <div class="blogItems" style="background-image: url('<?php echo $url; ?>')">
      <a href="<?php the_permalink(); ?>"><h4><?php the_title();?></h4></a>
    </div>
<?php } ?>

And this

    <?php
  while(have_posts()) {
    the_post();?>
    <?php $backgroundImg = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' ); ?>
    <div class="blogItems" style="background-image: url('<?php echo $backgroundImg[0]; ?>');">
      <a href="<?php the_permalink(); ?>"><h4><?php the_title();?></h4></a>
    </div>
<?php } ?>

And all come out with the same issue of having the url just come up empty in the inspect tab. If someone has an answer it'd be much appreciated!

Answer 1

Please try below code:

<?php
$args = array(
    'post_type' => 'post', //change with your post type
    'posts_per_page' => -1
);
$query = new WP_Query( $args );
if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post();
    $thumb = get_the_post_thumbnail_url(); ?>
        <div class="blogItems" style="background-image: url('<?php echo $thumb;?>');">
            <a href="<?php the_permalink(); ?>"><h4><?php the_title();?></h4></a>
        </div>
<?php endwhile; endif; ?>

Answer 2

Try adding get_the_ID() to get_the_post_thumbnail_url() in the first example:

<div class="blogContainer">
<?php
  while(have_posts()) {
    the_post();?>
    <?php $thumb = get_the_post_thumbnail_url(get_the_ID()); ?>
    <div class="blogItems" style="background-image: url('<?php echo $thumb;?>')">
      <a href="<?php the_permalink(); ?>"><h4><?php the_title();?></h4></a>
    </div>
<?php } ?>