Question

我的背景图片覆盖整个网页，溢出HTML和正文元素，即使它们都设置为100％。

这是一个简单的页面as seen here。

我尝试了几种不同的技术来放置背景图片（包括将其设置为cover，但我仍遇到此溢出问题）

（我觉得我有点疯狂，但我可能会错过一些非常明显的东西。）

Answer 1

尝试overflow:hidden

.translucent {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 92, 60, 0.95);
  overflow: hidden;
}

Answer 2

我想知道你为什么在body标签中设置它。为身体标签提供背景图像要容易得多。

所以我改变了你的身体css风格：

body {
    width: 100%;
    height: 100%;
    background: url('cover-plaza-707-fifth-construction.jpg') no-repeat center center fixed;
    background-size: cover;
    position: fixed;
}

现在您可以删除<img src="cover-plaza-707-fifth-construction.jpg" id="bg">

我希望这可以解决问题，但我还没有测试滚动。

Answer 3

[将其还原为cover背景图片，而不是我放置的z-index作为错误修复的独立图片]

将.translucent＆＃39; s min-height设置为100％（而不只是height: 100%;）解决了问题。

CSS背景图像溢出HTML？

3 个答案: