css - 在较小的 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>

我不想把所有东西都放在单独的 div 中。

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>