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

时间:2018-11-24 21:12:49

标签: css

我有一个<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>

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

1 个答案:

答案 0 :(得分:0)

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