カスタム投稿のシングルページに関連記事をおく際に上手くアイキャッチ画像が表示されない

前提・実現したいこと

実装内容：Wordpressで作ったカスタム投稿のシングルページに関連記事をコンテンツ下におく
カスタム投稿：single-blog.php

実装にあたっての詳細▼
①プラグインなしで実装
②関連記事表示　アイキャッチ画像（記事で使用している画像）＋記事名を記載
③関連記事表示　アイキャッチ画像の登録がない場合、ダミー画像を表示
④関連記事表示　アイキャッチ画像を背景画像（background）で指示

発生している問題・エラーメッセージ

・ダミー画像が表示されない
・アイキャッチ画像の画質が悪い

(1)single-blog.php

	
<div class="related_article">
  <p class="related__itemTitle">関連記事</p><div class="related_article_inner">
    <?php
      global $post;
      $args = array(
      'numberposts' => 6,
      'post_type' => 'blog',
      'term' => $term->slug, 
      'orderby' => 'rand',
      'post__not_in' => array($post->ID) 
      );
    ?>
     <?php $myPosts = get_posts($args); if($myPosts) : ?>
     <?php foreach($myPosts as $post) : setup_postdata($post); ?>
     <a class="related" href="<?php the_permalink(); ?>">
     <div class="page_thumbnail">
         
    <!--(1)実装にあたっての詳細項目全てできているが画質が悪いパターンの指示↓-->  
    <?php if(has_post_thumbnail()) {
       $image_url = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID));
       echo '<span class="bg_thumbnails" style="background-image:url('. $image_url[0]. '"></span>';
       } else {    
       echo '<div class="bg_thumbnails" style="background-image:url(' . get_template_directory_uri() . '/assets/img/blog_single/dami.jpg);"></div>';}?> 
    <!--/(1)-->  
                                                                           
    </div>
    <p class="related_name_title"><?php the_title(); ?></p>
    </a>
   <?php endforeach; ?>
  <?php else : ?>
   <p>関連アイテムはまだありません。</p>
 <?php endif; wp_reset_postdata(); ?>
</div><!-- /related_article_inner -->
</div><!--/related_article -->

(2)single-blog.php

	
<div class="related_article">
  <p class="related__itemTitle">関連記事</p><div class="related_article_inner">
    <?php
      global $post;
      $args = array(
      'numberposts' => 6,
      'post_type' => 'blog',
      'term' => $term->slug, 
      'orderby' => 'rand',
      'post__not_in' => array($post->ID) 
      );
    ?>
     <?php $myPosts = get_posts($args); if($myPosts) : ?>
     <?php foreach($myPosts as $post) : setup_postdata($post); ?>
     <a class="related" href="<?php the_permalink(); ?>">
     <div class="page_thumbnail">                                                     
     
　　<!--(2)実装にあたっての詳細項目の③以外できているパターンの指示↓-->     
    <span class ="bg_thumbnails" style="background-image: url(<?php echo wp_get_attachment_url( get_post_thumbnail_id() ); ?>)"></span> 
    <!--/(2)-->                       

    </div>
    <p class="related_name_title"><?php the_title(); ?></p>
    </a>
   <?php endforeach; ?>
  <?php else : ?>
   <p>関連アイテムはまだありません。</p>
 <?php endif; wp_reset_postdata(); ?>
</div><!-- /related_article_inner -->
</div><!--/related_article -->

CSS　※(1)(2)共通

<style>
    .related_article{
        padding-top: 60px;
        padding-bottom: 30px;
    }
    
    .related__itemTitle{
        color: #454545;
        font-weight: 900;
        font-size: 1.9rem;
        text-align: center;
    }
    
    .related_article_inner{
        display:flex;
        flex-wrap:wrap;
    }
    
    .related{
        margin-right:27px;
        margin-top:45px;
        width:calc(33.3% - 18px);
        display:inline-block;
        vertical-align:top;
    }
    
    .related:hover{
        opacity: 0.8s;
        transform: all 800ms ease 0s;
    }
    
    .related:nth-child(3n+3){
        margin-right:0px;
    }
    
    .bg_thumbnails{
        display: block; 
        height: 250px;  
        background-size: cover;
        background-position: left center; 
    }
    .related .related_name_title{
        font-size: 1em;
    }
    .page_thumbnail{
        margin-bottom:15px;
    }	
    
</style>

試したこと

(1)single-blog.php：実装にあたっての詳細項目全てできているが画質が悪いパターン
アイキャッチ画像が粗くなってしまいました。
background：coverやwidth、heightの変更を行いましたが画像が粗いままでした。

(2)single-blog.php：実装にあたっての詳細項目の③以外できているパターン
アイキャッチ画像は綺麗に映っているものの上で述べた③が指示方法がわからずダミー画像が表示されない状態です。
参考にしたサイトhttps://sugoyoku.com/blog/background-image-thumbnail/

php初心者で本、他サイトを見ながら記述しているのでどの画像を指示しているのか理解不足の中記述しています。
そんな中、デベロッパーツールで確認したところ（１）（２）の指示している画像が違う事がわかりました。
(1)/wp-content/uploads/2020/02/826cdfadca5463ad4a14348176957097-150x150.jpg
(2)/wp-content/uploads/2020/02/826cdfadca5463ad4a14348176957097.jpg

希望としては、
(1)のダミー画像を指示できている状態で(2)の画像が表示される記述に変換したいです。
何度か試したのですが、wordpressエラーが出たり画像がまばらに表示されたり、全く画像が表示されなかったりしました。