html - 如何在 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;
}