반응 형 배경 이미지 (가운데에 텍스트 중앙에 유지)

Question

헤더 이미지와 텍스트에 대한 과거와 같이 최소한의 미디어 쿼리로 배너를 코딩하려고합니다. 배경 이미지가 응답되고 있지만, 브라우저의 크기를 조정하지만 같은 Header Image

을 :이처럼 보이는 반응 배경 이미지가

: 방법은 10

내 현재의 문제에서 무엇을 사용하는 텍스트가 들어있는 배경 div 내의 컨테이너의 크기가 조정되지 않습니다. 중간에 텍스트를 중앙에 두지 않는 것이 중요합니다.

당신은 이런 일이 일어나고 볼 수 있습니다 Container overflowing

나는 모든 종류의 것들을 시도했습니다, 높이 높이를 제거하는 컨테이너에. 하지만 내가 끝내야하는 모든 영역에서 텍스트를 수정하기 위해 너무 많은 미디어 쿼리를 수행해야하거나 화면 크기가 줄어들어 대신 이미지의 높이를 변경해야합니다. 나는 더 유연하고 직관적 인이 웹 사이트의 더 나은 헤더를 코딩하는 방법을 배우고 싶습니다. 앞으로의 프로젝트를 수행 할 수 있습니다. "커버를 배경 크기;"추가

.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

시도 : 여기

<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입니다 : 여기

는 코드 HTML입니다 귀하의 배너 이미지와 최소 높이를 추가하십시오.