2017-04-23 112 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

由于它的工作原理与。 –