html - 在div全屏宽度中设置背景图像

Question

我在页面顶部的 wrapperlp 中设置了图像背景。它工作正常，但它的宽度设置为 1000px。我需要这张图片横跨屏幕的整个宽度，但是当我改变宽度时没有任何反应。

CSS

#wrapperlp {
    width: 100%;
    margin: auto;
}

@media screen and (max-width: 800px) {
    #wrapperlp {
        width: 90%;
        min-width: 100px;
    }
}

#headerlp {
    font-size: 30px;
    color: white;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
}

#para {
    font-size: 20px;
    color: white;
    text-align: center;
}


#game_img {
    height: 250px;
    width: auto;
    margin-bottom: -30px;
    position: relative;
    display: inline-block;
    float: left;
    margin-top:-35px;
    padding-top: 5px;
    max-width: 100%;
}

#video_play {
    position: relative;
    display: inline-block;
    float: right;
    margin-top:-30%;
    width:280px;
    padding-right:10px;
}


#spacer {            
    height: 40px;           
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 900px;
    padding-top:20px;
}

.reward_img {
    padding-left: 45px;
    padding-top: 5px;
    position: relative;
    display: inline-block;
    float: left;
}

html

 <div id="wrapperlp">
        <div style="background-image: url(); height: 430px; width: 1000px; margin-left: auto; margin-right: auto; max-width: 100%;">
            <div id="headerlp">text</div>
            <div id="para">text</div>
            <div id="game_img"><</a></div>
        </div>
    </div>
    <div id="video_play">text</div>
    <div>
        <div id="spacer">
            <div style="position: relative; float: left">text</div>
        </div>

Answer 1

除了此处的其他答案，您还可以在 background-size 中使用值 cover 或 contain:

覆盖
cover 值指定背景图像的尺寸应尽可能小，同时确保两个尺寸都大于或等于容器的相应尺寸。

background-size: cover;

包含
contain 值指定无论包含框的大小如何，背景图像都应缩放，以便每一边都尽可能大，同时不超过容器相应边的长度。

background-size: contain;

来源:https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Scaling_background_images