CSSで反応する背景イメージを作る方法

Question

2つのdivをもう1つのdivブートストラップコンテナ（1つの左上、1つの右下）に入れて解決しました。

私の次の問題は、メインdiv（内部に座っている2つのdivで）です。私は応答の高い大きな背景画像が必要なので、ブラウザが小さくなるにつれて右下のdivを上と下に持ち込みます。ここで

は、私がこれまで持っているものです：

私は上記の行っているかのようなCSSに背景画像を追加する

<style> 
#header { 
background-image: url(/images/background-image.jpg); 
position: relative; 
} 

#header .container { 
height: 893px; 
position: relative; 
} 

#header .div1 { 
position: absolute; 
top: 20px; 
} 

#header .div2 { 
position: absolute; 
bottom: 20px; 
right: 20px; 
} 

<div id="header"> 
<div class="container"> 
    <div class="div1"> 
     Top left content 
    </div> 
    <div class="div2"> 
     Bottom right content 
    </div> 
</div> 

、画像が応答しますが、私はそれを追加する場合はありませんイメージとしてのHTMLイメージの上にdivを置くことはできません。

これを行う正しい方法は何ですか？

Answer 1

これは解決するか、少なくとも正しい方向にあなたを得ることができます。ヘッダースタイルを次のように変更すると、背景画像が左上に移動され、divの100％が塗りつぶされます。 「完全に」応答する背景画像を持つことは難しいことです。いくつかのクロスブラウザのベンダープレフィックス付き

#header { 
background-image: url(/images/background-image.jpg); 
background-repeat:no-repeat; 
background-size: 100%; 
background-position:top left; 
position: relative; 
} 

http://codepen.io/adamfollett/pen/OXdKyG

Answer 2

。

#header { 
    display: block; 
    position: relative; 
    background: url('/images/background-image.jpg') 50% 0 no-repeat; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}