Aligning Text und Erhaltung img Seitenverhältnis

Question

Ich versuche, ein Header-Layout wie das auf dem Bild zu arrangieren

ich das Hintergrundbild möchte das Seitenverhältnis für jede Bildschirmgröße zu halten und der Text floating links unten mit etwas Spielraum. Ich habe nach der unten, aber das Problem ist, dass der Text unter dem Bild an einigen Haltepunkten oder zu nah am Boden

.header { 
    background-size:100%; 
    background-repeat:no-repeat; 
    overflow:hidden; 
    height:100%; 
    color: $dark; 
    .summary{ 
    text-align:left; 
    margin-top:30%; 
    margin-bottom:5%; 
    margin-left:triple($spacing-unit); 
    hr { 
     position: relative; 
     height:6px; 
     background: $green; 
     text-align:left; 
     border-width: 6px !important; 
     width: 130px; 
    } 
    } 
} 

HTML

<section id="main" class="no-pad"> 
    <div class='header' style="background-image: url('http://via.placeholder.com/1280x756')"> 
     <div class="summary"> 
     <hr></hr> 
     <p class="tagline">BIG TEXT HERE</p> 
     <p class="tagline">Smaller text</p> 
     <p class="intro">continuing smaller text</p> 
     </div> 
    </div> 
    </section> 

Answer 1

über oben Kommentar

CSS geht (bestätigt als funktionierende Antwort):

Die Probleme klingen für mich wie es ist, weil das Hintergrundbild selbst nicht wie vorgesehen funktioniert. Versuchen Sie background-image: cover;