リサイズしても背景を画像に合わせる方法

Question

どのようにしてこの効果を得ることができますか？

灰色の画像は背景で、青色のボックスはimgです。

私はブートストラップを使用しています。

大きな画面では、このように見えます。 2つのdivがあり、それぞれ6つの列にまたがっています（12のうち）。

モバイルデバイス、例えば、サイズ変更する場合、テキストが画像を下回ります。

Answer 1

あなたは、この使用してCSS複数の背景を解決することができます。

MDNドキュメントで見つかった例に基づいて、この例を参照してください。最後に

<div class="multi_bg_example"></div> 

.multi_bg_example { 
    width: 100%; 
    height: 400px; 
    background-image: url(https://mdn.mozillademos.org/files/11305/firefox.png), url(https://mdn.mozillademos.org/files/11307/bubbles.png), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)); 
    background-repeat: no-repeat, no-repeat, no-repeat; 
    background-position: 100px 100px, left, right; 
    background: -moz-linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)), -webkit-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)), -ms-linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)); 
} 

https://jsfiddle.net/MadalinaTn/e79gb1w5/1/

Answer 2

<div class="row"> 
     <div class="col-sm-6 col-xs-12">IMG goes here</div> 
     <div class="col-sm-6 col-xs-12">Text goes here</div> 
    </div> 

Answer 3

をルックSkeuurが推奨されているように私は、Xと背景のy位置をジャグリング。

でコード：投稿質問のhttps://jsfiddle.net/nd1mmdf3/

.with-bg { 
    background-image: url('bg.jpg'); 
    background-position: -240px -180px; 
    background-repeat: no-repeat; 
}