注目の画像の背景画像を作成

私のワードプレスの投稿では、ページの上部に投稿のサムネイルを全幅にしたいと思っています。私はそれがページの全幅をカバーするようにしたい、そしてページが大きくなると画像が作物やズームインする。（https://www.inthefrow.com/2016/10/3-amazing-places-eat-mykonos.htmlと同様）以下の私のコードは処理中の作業です。これは、画像を背景画像にする際に機能しますが、全幅ではありません。画像の幅のみになります。助けていただければ幸いです。前もって感謝します。注目の画像の背景画像を作成

style.php

<?php 
 
get_header(); 
 
if (have_posts()) : 
 
while (have_posts()) : the_post(); ?> 
 
<article class="post"> 
 
    
 
    
 
     <?php $featuredImage = wp_get_attachment_url(get_post_thumbnail_id($post->ID), 'full'); ?> 
 
<div class="banner" style="background:url(<?php echo $featuredImage; ?>) no-repeat;"></div> 
 
    
 
    
 
    
 
<?php wpb_set_post_views(get_the_ID()); ?>  
 
    <div class="post-info">  
 
    <h1 class="post-title"><?php the_title(); ?></h1> 
 
    <h2 class="post-date"><?php echo strip_tags(get_the_term_list($post->ID, 'location', 'Location: ', ', ', ' • '));?><?php the_date('F m, Y'); ?></h2> 
 

 
    </div> 
 
    <div class="post-content"><?php the_content(); ?></div> 
 
    <div id="wrapper-footer"><div class="post-footer"><h1 class="post-footer-comment"><?php comments_popup_link ('No Comments', '1 Comment', '% Comments', 'post-footer-comment-count', 'none'); ?></h1><div class="share"><span>share</span> <?php get_template_part('share-buttons-post'); ?></div></div> 
 
     <div class="post-footer-bloglovin"><h1>never miss a post</h1><h2><a href="#">follow by email'</a></h2></div></div> 
 
<?php get_template_part('prevandnextpost'); ?> 
 
    <?php get_template_part('related-posts'); ?> 
 

 
<?php comments_template(); ?> 
 
</article> 
 
<?php endwhile; 
 
else : 
 
echo '<p>No content found</p>'; 
 
endif; 
 
get_footer(); 
 
    
 
?>

CSS

.banner { 
 
     max-width: 100%; 
 
    width:100%; 
 
     height:700px; 
 
    background-size: cover; 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
}

出典

2017-01-07 user6738171