Css 如何获得超出最大宽度div的背景图片

我有一个响应网站，最大宽度设置为1000px，但我需要适合的背景图片，将重叠的一个div，也将全页宽度的底部边界到其他div

我的代码如下所示：

.container{
宽度：100%；
最大宽度：1000px；
}
.商标测试{
背景色：#03b9e5；
高度：50px；
}
.导航测试{
背景色：#e4ed00；
高度：25px；
}
.社会测试{
背景色：#ab801a；
高度：25px；
}
梅因先生{
高度：750px；
背景：url（background.jpg）没有重复的顶部中心；
保证金：自动；
}
.线路{
边框底部：1px纯黑；
}
.货柜：之后{
明确：两者皆有；
内容：“.”；
显示：块；
身高：0；
可见性：隐藏；
}

---

您的解决方案

如果浏览器对

背景尺寸

属性的支持足够好，您可以使用

背景尺寸：封面。检查或查看浏览器支持

下面是代码片段，展示它是如何工作的。如果希望背景图像始终居中，请确保将背景图像置于
居中位置


.container{
宽度：100%；
最大宽度：300px；
保证金：0自动；
}
.线路{
边框底部：1px纯黑；
}
.商标测试{
背景色：#03b9e5；
高度：50px；
}
.导航测试{
背景色：#e4ed00；
高度：25px；
}
.社会测试{
背景色：#ab801a；
高度：25px；
}
梅因先生{
高度：250px；
背景：url(http://lorempixel.com/250/250)无重复中心；
背景尺寸：封面；/*这很神奇*/
}
.货柜：之后{
明确：两者皆有；
内容：“.”；
显示：块；
身高：0；
可见性：隐藏；
}

把你的内容放在这里。
你玩过
背景尺寸：封面和外包装？最大宽度应用于
容器div的
。第二个div既没有类
容器
也没有父容器div。第一个解决方案也不起作用。工作原理与我最初的解决方案类似（第二个div部分对图像和内容使用全屏宽度），但您的解决方案没有给出第一条底线的全屏宽度。我不太明白您希望底线在哪里。你想让它在你的div下面，有
container
class和
main
class（这意味着三行）？您是否希望您的行在1000px以上的宽度上也是全屏的？你能发布一张图片来显示你想要什么吗？@lomenak我已经更新了我的答案，在
container
和
main
class divs下面添加了行。这条线路现在全屏显示。我已经将您的
最大宽度
从1000px更改为300px，这样您就可以看到这是否是您想要的（只需将代码中的300px替换为1000px）。我在每个
容器
和
main
div下方添加了一个
全屏行，这是您想要的吗？另外，在我做一些更改时，一定要检查整个代码。mate这看起来正是我所需要的。明天早上我会好好测试一下，然后回来找你！对不起，伙计，我也曾想过对线条使用单独的div，这确实使线条具有全宽，但是我希望能够在全宽范围内为主（以及第三个div）提供背景图像。例如，我只希望所有其他内容（线条和背景图片除外）受最大宽度的影响