Размер фона: обложка и размер фона: содержат

Question

Это то, что мне нужно достичь с помощью моего HTML/CSS, текст всегда должен находиться внутри зеленого контейнера, независимо от размера экрана.

Это мой HTML:

<section id="aboutprocess"> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-md-8 col-md-offset-2"> 
        <p class="text-center">Our agile team continuously delivers working software and empowers your organization to embrace changing requirements. 
        </p> 
        <button type="button" class="btn btn-link center-block white" role="link" type="submit" name="op" value="Link 2">about our process</button> 
       </div> 
       <!--end col-md-8 col-md-offset-2--> 
      </div> 
      <!--end row --> 
     </div> 
     <!--end container--> 
    </section> 
    <!--end aboutprocess--> 

Для того, чтобы достичь этой точки зрения, я использовал background-size: contain + flexbox:

#aboutprocess { 
     background: url("../img/tech_bg.png") no-repeat left top; 
     width: 100%; 
     height: 588px; 
     background-size: contain; 
     display: -webkit-box; 
     display: -ms-flexbox; 
     display: flex; 
     -webkit-box-align: center; 
     -ms-flex-align: center; 
     align-items: center; 
    } 

    #aboutprocess p { 
     color: #ffffff; 
    } 

При изменении размера окна, то текст выходит за пределы:

Когда я использую background-size cover, зеленый фоновое изображение не показывает оригинальную форму больше:

Как я мог заставить его работать, что этот зеленый фон остается его форма и текст остается на этот фон выравнивается как по вертикали, так и по горизонтали.

Вот ссылка to the demo page.

Благодарим за помощь.

Answer 1

Проблема вызвана, как у вас есть фиксированная высота вашего контейнера - он должен сохранить пропорции фонового изображения для правильной работы

Используя padding css ratio hack, вы можете получить контейнер, чтобы сохранить пропорции и затем поместить строку соответственно:

#aboutprocess { 
 
    background: url("http://dolm.ragne.me/img/tech_bg.png") no-repeat left top; 
 
    width: 100%; 
 
    background-size: cover; 
 
} 
 
#aboutprocess .container { 
 
    padding-top: 32.6316%; 
 
    position:relative; 
 
} 
 
#aboutprocess .row { 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    right:0; 
 
    bottom:0; 
 
    display:flex; 
 
    align-items: center; 
 
    justify-content:center; 
 
} 
 
#aboutprocess .col-md-8 { 
 
    color: #ffffff; 
 
    text-align:center; 
 
}

<section id="aboutprocess"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-8 col-md-offset-2"> 
 
     <p class="text-center">Our agile team continuously delivers working software and empowers your organization to embrace changing requirements. 
 
     </p> 
 
     <button type="button" class="btn btn-link center-block white" role="link" type="submit" name="op" value="Link 2">about our process</button> 
 
     </div> 
 
     <!--end col-md-8 col-md-offset-2--> 
 
    </div> 
 
    <!--end row --> 
 
    </div> 
 
    <!--end container--> 
 
</section>