レスポンシブバックグラウンドイメージ（その中にテキストを中心に維持）

Question

ヘッダーイメージとテキストの過去のように、最小限のメディアクエリでバナーを作成しようとしていますが、私の現在の問題

10の下に何かを使用する方法：ブラウザのサイズが変更と背景画像が応答しているが、しかし Header Image

：

私はこのようになります応答背景イメージを持っていますテキストを格納する背景div内のコンテナはサイズ変更されていません。テキストを中央に集中させないようにしてください。

あなたはこのような何かが起こっている見ることができます： Container overflowing

私は高さの除去、コンテナの高さをあらゆる種類のものを試してみました。しかし、私がやって来るすべての領域は、テキストを修正するためにあまりにも多くのメディアクエリを実行しなければならないか、画面サイズが下がるにつれてイメージの高さを変更する必要があります。私はこのWebサイトのより柔軟で直感的なヘッダをコーディングする方法を学び、私の将来のプロジェクトを引き継ぐことを学びたいと思っています。ここで

は、コードのHTMLである：ここで

<section class="home_banner"> 
    <?php 
    $featuredimage = get_the_post_thumbnail_url(); 
    ?> 
    <div class="banner_image" style="background-image: url('<?php echo $featuredimage; ?>'); "> 
     <div class="container"> 
      <div class="banner_text_inner"> 
       <p>Lorem Ipsum</p> 
       <div class="banner_excerpt"> 
        <h1>Powerful engaging opening title</h1> 
       </div> 
      </div> 
     </div> 
    </div> 
</section> 

は、CSSです：

.home_banner{ 

    .banner_image { 
     background-size:100%; 
     height:100rem; 
     background-repeat: no-repeat; 

    } 

    .container { 
     display: flex; 
     justify-content: center; 
     align-items: center; 
     height: 100%; 
     text-align: center; 

     .banner_text_inner { 
     max-width: 1000px; 
     width: 100%; 
     margin: auto; 
     padding: 0 10px; 
     box-sizing: border-box; 
     font-family: $autumnchant; 
     font-size: 40px; 
     color: $color-primary; 

      @media (max-width: 1000px){ 
       font-size: 30px; 

       p { 
        margin-bottom: 0; 
       } 
      } 

      @media (max-width: 400px){ 
       font-size: 22px; 
      } 
     } 

     .banner_excerpt { 
      @media (max-width: 1000px){ 
       h1 { 
        font-size: 40px; 
       } 
      } 

      @media (max-width: 400px){ 
       h1 { 
        font-size: 30px; 
        line-height: 1; 
        letter-spacing: 5px; 
        margin-bottom: 0; 
       } 
      } 
     } 

    } 
} 

Answer 1

追加してみます "背景サイズ：カバー;"あなたのバナー画像に追加し、最小の高さも追加します。