如何在较小的div中获取背景图像以覆盖整个屏幕

Question

我有一个<div class="container">可以覆盖60％的屏幕。我将如何在课堂背景上使用背景并覆盖整个屏幕？

<div class="container">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    <div class="background">
        I want this to have background across entire page
    </div>

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    <div class="background">
        I also want the background here
    </div>
</div>
<style>
    .container {
        width=60%;
   }
   .background {
        background-image: url("img.jpg");
        /*???*/
    }
</style>

我不想将所有内容分开放置。

Answer 1

.container {
width:60%;
}

.background {
background-image: url("http://lorempixel.com/400/200/");
width:100vw; /* replaced with 100% */
height:50px;
}

<div class="container">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    <div class="background">
        I want this to have background across entire page
    </div>

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    <div class="background">
        I also want the background here
    </div>
</div>