dousao9569 2017-04-23 20:25
浏览 130
已采纳

如何在Wordpress中将帖子特色图像设置为背景图像

I created a section where I display all my post content. My struggle is now to set the post thumbnail as a background image.

Here the structure of the section:

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

Here my 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;
}

When I try to view the page the image does not show and tying to inspect the page it shows this:

background-image: url((unknown));

How can I set the thumbnail as background image of my div box?

Hope you can help

  • 写回答

1条回答 默认 最新

  • dppfxf909679 2017-04-23 20:36
    关注

    Please try the below code,

    <?php $thumb = get_the_post_thumbnail_url(); ?>
    <div class"image-class" style="background-image: url('<?php echo $thumb;?>')"></div>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 虚拟机打包apk出现错误
  • ¥30 最小化遗憾贪心算法上界
  • ¥15 用visual studi code完成html页面
  • ¥15 聚类分析或者python进行数据分析
  • ¥15 逻辑谓词和消解原理的运用
  • ¥15 三菱伺服电机按启动按钮有使能但不动作
  • ¥15 js,页面2返回页面1时定位进入的设备
  • ¥50 导入文件到网吧的电脑并且在重启之后不会被恢复
  • ¥15 (希望可以解决问题)ma和mb文件无法正常打开,打开后是空白,但是有正常内存占用,但可以在打开Maya应用程序后打开场景ma和mb格式。
  • ¥20 ML307A在使用AT命令连接EMQX平台的MQTT时被拒绝