如何使CSS中的背景圖像響應

Question

之前我問了一個問題，就是讓2個div進入另一個div bootstrap容器（1個左上角，1個右下角），現在已經解決了。

我的下一個問題是，在主div（里面有2個div）我需要一個大的背景圖像，它是響應的，所以當瀏覽器變小時，將右下角div向上和向內。

這是我到目前為止：

<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>

像我上面所做的那樣將背景圖像添加到CSS中，不會使圖像響應，但如果我將其作為圖像添加到HTML中，則無法讓div位於圖像的頂部。

這樣做的正確方法是什么？

Answer 1

有一些跨瀏覽器的供應商前綴。

#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;
}

Answer 2

這可能會解決或至少讓您朝着正確的方向前進。 將標題樣式更改為以下內容，它將強制將背景圖像放在左上角並填充100％的div。 擁有“完美”響應背景圖像可能會很棘手。

#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