レスポンシブの背景サムネイル

Question

私はwordpressでテーマを構築しようとしていますが、ブラウザウィンドウのサイズを変更するときに背景画像のサイズを変更する方法を理解できません。私は画像を取得し、「フル」、または他のプリセットのサイズのいずれかに設定すると、私はサイズを変更しません：私のフロントページ - PHPで

を：

<?php 
    // check if the post or page has a Featured Image assigned to it. 
    if (has_post_thumbnail()) { 
     // the_post_thumbnail(); 

     $backgroundImg = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'full');?> 

     <header id="hero" style="background: url('<?php echo $backgroundImg[0]; ?>') no-repeat center center fixed;"></header> 

    <?php } 
?> 

と私のCSSファイルで：

header { 
    max-width: 100vw; 
    height: 95vh; 
    background-size: cover; 
} 

それは単に同じままです..どんな助けでもありがとう！

Answer 1

投稿のサムネイルURLを取得する簡単な方法があります。また、style属性にbackground-imageプロパティを設定する方が良いと思います：

<?php 
    // check if the post or page has a Featured Image assigned to it. 
    if (has_post_thumbnail()) { 

     // the_post_thumbnail(); 
     $backgroundImg = get_the_post_thumbnail_url($post->ID, 'full'); ?> 

     <header id="hero" style="background-image: url('<?= $backgroundImg; ?>');"></header> 

    <?php } 
?> 

& CSSは次のようになります。

header { 
    max-width: 100vw; 
    height: 95vh; 
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: center; 
    background-attachment: fixed; 
}