ブートストラップ画像に背景を追加するには？

Question

は、私はそれがまた、小さな画面上で応答性のままになるよう適切にCSSを適用することはできませんよ

<div class="row"> 
     <div class="col-md-8 col-md-offset-2"> 
     <div class="background"> 
     <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97250&w=350&h=250" class="img-responsive"> 
     </div> 
     <div class="bg-text"> 
      <h2>testing</h2> 
      <h2>Text</h2> 
     </div> 
     </div> 
    </div> 

ような何かを達成しようとしています。

ありがとうございました。

Answer 1

html,body{ 
 
    width:100%; 
 
    height:100%; 
 
} 
 
.bigger{ 
 
    width:100%; 
 
    height:200px; 
 
    background-image:url('http://images.financialexpress.com/2015/12/Lead-image.jpg'); 
 
    background-size:cover; 
 
    background-position:center; 
 
    position:relative; 
 
} 
 
.smaller{ 
 
    width:100%; 
 
    height:50px; 
 
    background-color:rgba(0,0,0,0.6); 
 
    position:absolute; 
 
    bottom:0; 
 
    text-align:center; 
 
    color:white; 
 
}

<div class="bigger"> 
 
    <div class="smaller">Text Here</div> 
 
</div>