2017-04-23 51 views
0

我創建了一個部分,顯示我的所有帖子內容。我現在的努力是將發佈縮略圖設置爲背景圖像。如何在Wordpress中將背景圖像設置爲張貼特色圖像

以下部分的結構:

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

這裏我的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; 
} 

當我嘗試查看該頁面的圖像不顯示和搭售檢查的頁面就顯示了這個:

background-image: url((unknown)); 

如何將縮略圖設置爲我的div盒的背景圖像?

希望你能幫助

回答

3

請嘗試下面的代碼,

<?php $thumb = get_the_post_thumbnail_url(); ?> 
<div class"image-class" style="background-image: url('<?php echo $thumb;?>')"></div> 
+0

由於它的工作原理與。 –

相關問題