レスポンシブ・イメージとダイナミック・テキスト・オーバーレイでDIVを作成する方法

Question

このバックグラウンド・イメージをレスポンシブにして、イメージの特定の配置にテキストを保持する方法

http://jsfiddle.net/webtiki/Dj7Hb/7/

HTML：

<div class="wrapper"> 
<img src="YOUR_IMAGE" /> 
<div class="content"> 
    <div> 
     <div> 
      blahblab 
     </div> 
    </div> 
</div> 
</div> 

CSS：

.wrapper { 
width:960px; 
margin:0 auto; 
position:relative; 
} 
.wrapper > img { 
width:100%; 
height:auto; 
} 
.content { 
top:0; 
position:absolute; 
width:100%; 
height:100%; 
} 
.content > div { 
display:table; 
width:100%; 
height:100%; 
} 
.content > div > div { 
display:table-cell; 
vertical-align:middle; 
text-align:center; 
} 

Answer 1

がラッパーの代わりに、imgタグにサイズのカバーとCSSの背景画像に、あなたの背景を変更します。

background-image: url(your-img); 
background-size: cover; 
background-repeat: no-repeat; 

これが役に立ちます。