我会做相反的事情，将图像放在主div中，宽度为100%，这将使div和图像都响应屏幕大小，

然后在主div的宽度和高度为100%的绝对定位div中添加内容。

<div class="main" style="position: relative; width: 100%;">
    <img src="your_image.png" style="width: 100%;">
    <div style="position: absolute; width: 100%; height: 100%; display: flex...">
            YOUR CONTENT
    </div>
</div>

也许这有帮助，这不是一个确切的背景，但你能理解:

<style>
div {
    float: left;
    position: relative;
}
div img {
    position: relative;
}

div div {
    position: absolute;
    top:0;
    left:0;
}
</style>

<div>
    <img src="http://antwrp.gsfc.nasa.gov/apod/image/0903/omegacen_davis.jpg" />
    <div>Hi there</div>
</div>

我有这个问题，并找到了Hasanavi的答案，但我在宽屏上显示背景图像时遇到了一个小bug -背景图像没有扩散到屏幕的整个宽度。

所以这是我的解决方案-基于Hasanavi的代码，但更好…这应该适用于超宽屏幕和手机屏幕。

/*WIDE SCREEN SUPPORT*/
@media screen and (min-width: 769px) { 
    div {
        background-image: url('http://www.pets4homes.co.uk/images/articles/1111/large/feline-influenza-all-about-cat-flu-5239fffd61ddf.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        width: 100%;
        height: 0;
        padding-top: 66.64%; /* (img-height / img-width * container-width) */
                    /* (853 / 1280 * 100) */
    }
}

/*MOBILE SUPPORT*/
@media screen and (max-width: 768px) {
    div {
        background-image: url('http://www.pets4homes.co.uk/images/articles/1111/large/feline-influenza-all-about-cat-flu-5239fffd61ddf.jpg');
        background-size: contain;
        background-repeat: no-repeat;
        width: 100%;
        height: 0;
        padding-top: 66.64%; /* (img-height / img-width * container-width) */
                    /* (853 / 1280 * 100) */
    }
}

你可能已经注意到了，background-size: contains;属性不适合超宽屏幕，背景尺寸:覆盖;属性不适合移动屏幕，所以我使用这个@media属性来处理屏幕大小并修复这个问题。

这招对我很管用:

background-image: url("/assets/image_complete_path");
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover;
height: 100%;

如果你可以在Photoshop中制作一张图像，其中主图层的不透明度为1左右，基本上是透明的，将img放在div中，然后将真实的图片作为背景图像。然后设置img的不透明度为1，并添加你想要的尺寸。

这张图片就是这样做的，你甚至不能把不可见的图像拖出页面，这很酷。

我用jQuery解决了这个问题。直到新的CSS规则允许这种类型的行为，我发现这是最好的方法。

设置你的divs

下面是你想要显示背景的div(“hero”)，然后是你想要覆盖在背景图像上方的内部内容/文本(“inner”)。你可以(也应该)将内联样式移动到英雄类中。我把它们留在这里，这样就可以快速和容易地看到应用到它的样式。

<div class="hero" style="background-image: url('your-image.png'); background-size: 100%; background-repeat: no-repeat; width: 100%;">
    <div class="inner">overlay content</div>
</div>

计算图像纵横比

接下来，通过将图像的高度除以宽度来计算图像的纵横比。例如，如果你的图像高度是660，宽度是1280，那么长宽比就是0.5156。

设置一个jQuery窗口大小调整事件来调整高度

最后，添加一个jQuery事件监听器来调整窗口大小，然后根据纵横比计算英雄div的高度并更新它。这种解决方案通常会在底部留下一个额外的像素，因为使用纵横比的计算不完美，所以我们在结果大小中添加一个-1。

$(window).on("resize", function ()
{
    var aspect_ratio = .5156; /* or whatever yours is */
    var new_hero_height = ($(window).width()*aspect_ratio) - 1;
    $(".hero").height(new_hero_height);
}

确保它在页面加载时工作

您应该在页面加载时执行上面的resize调用，以便在一开始就计算出图像的大小。如果你不这样做，那么英雄div将不会调整，直到你调整窗口的大小。我设置了一个单独的函数来进行大小调整。下面是我使用的完整代码。

function updateHeroDiv()
{
    var aspect_ratio = .5156; /* or whatever yours is */
    var new_hero_height = ($(window).width()*aspect_ratio) - 1;
    $(".hero").height(new_hero_height);
}

$(document).ready(function() 
{       
    // calls the function on page load
    updateHeroDiv(); 

    // calls the function on window resize
    $(window).on("resize", function ()
    {
        updateHeroDiv();        
    }
});