完整的背景图片，忽略站点结构？

Question

我有一个看起来像这样的网站：

<div id="top" class="header-container2">...</div>
<div class="main-container">...</div>

第一个 div 是 header 部分，第二个是包含产品等的主要内容区域。现在我想要一个完整的背景图片，我试过这样：

html {
    background: url(someimage.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

无效，未显示图像。在 body 元素上它也不起作用。只有当我将完全相同的 CSS 分配给 main-container div 时，它才有效，但图像不会在 ID 为 top 的 div 上显示为背景当然。那么，如何在不考虑站点结构的情况下分配背景图像呢？有可能吗？

我仔细检查了图像的路径，所以这不是问题。

Answer 1

首先，确保你的两个 div 没有 background 属性，否则你可以简单地将它们包含在包含 div 中并分配background 到它。

Answer 2

将htmlheight设置为100vh或100%

html {
    background: url(someimage.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100vh;
}

这些是我们在上面设置的默认 CSS，同时编写自定义样式，如 body、html 到 100%

并且提供最少的 HTML 和 CSS 工作代码也很好。

Answer 3

我想你也可以使用正文。您使用任何 CSS 重置吗？

body {
    background: url(https://images.pexels.com/photos/1227511/pexels-photo-1227511.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
div {background-color:rgba(255,255,255,0.7);margin-bottom:10px;padding:10px;}

<div id="top" class="header-container2">header-container2</div>
<div class="main-container">main-container</div>

要使页面覆盖 window 高度，您可以尝试：

html, 
body {
    height: 100%;
}

完整的背景图片，忽略站点结构？

Full background image, ignoring the sites structure?

css

background-image