특집 이미지 배경 이미지 만들기

내 워드 프레스 게시물에 전체 너비가되도록 페이지 상단에 포스트 축소판을 추가하고 싶습니다. 페이지의 전체 너비를 커버하고 페이지가 커지면 이미지 작물을 확대하거나 확대합니다 (이 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