レスポンシブサイトもサポートする画像にテキストオーバーレイを作成したい

Question

以下はHTMLコードです。私はデザインのためにブートストラップ3を使用しています。私はイメージの上にテキストを配置しましたが、正しい位置にとどまらないので問題が発生します。ブラウザのサイズを変更すると、背景のテキストの位置が間違って表示されます。ですから、この問題の解決方法を教えてください。

<div class = "col-xs-12"> 
<h3 class="cen-align">STORIES OF CHANGE</h3> 
<img src="img/rig_img1.jpg" class="center-block img-responsive image-wrapper" /> 
<p class="img-ps">Advocating Land Rights for BPL Dalit communities in Alampur village...</p> 
</div> 

CSSコード：

.img-ps{ 
font-size:13px; 
text-align:center; 
position: absolute; 
left:66px; 
top:143px; 
padding: 10px; 
background-color:rgba(0,0,0,0.3); 
width: 248px; 
color: #FFF; 
margin: 0px; 
} 
.image-wrapper{ 
position: relative; 
width: 250px; 
} 

Answer 1

私はあなたが必要とする内容を正確に把握していないが、これはあなたのために働くのでしょうか？

HTML：

<div class = "col-xs-12"> 
    <h3 class="cen-align">STORIES OF CHANGE</h3> 
    <img src="img/rig_img1.jpg" class="image"> 
    <p>Advocating Land Rights for BPL Dalit communities in Alampur village...</p> 
</div> 

CSS：

.image { 
    position: relative; 

} 

p { 
    position: absolute; 
    top: 200px; 
    left: 0; 
    width: 100%; 
    color: white; 
}