如何让我的网站背景在 CSS 中填满屏幕答案

【问题标题】：How do I make my website background fill the screen in CSS如何让我的网站背景在 CSS 中填满屏幕
【发布时间】：2018-06-07 05:09:16
【问题描述】：

我在我的网站上制作了两种表格，都被一个<div class="wrapper"> 标签包围。我使用 CSS 为其添加了背景图片。

.wrapper {
    background-image: url(../images/backgrounds/desktop.jpg);
    background-size: 100%;
    background-position: top;
    width: 100%;
    height: 100%;
    min-width: 950px;
}

但是，这就是网站的实际外观。我无法扩展图像的底部以填充屏幕。我不知道为什么会这样。

【问题讨论】：

这与 PHP 无关。
How to make full screen background in a web page的可能重复

标签： html css

【解决方案1】：

div 的高度是什么的 100%？如果它是 body 的直接子代，则默认情况下 body 不会 100% 包裹屏幕。所以你必须使身体 100%，然后包装也将占身体的 100%。如果有更多的父元素，它们都应该有样式height:100%：

html,body{
    height:100%;
}

同时添加background-size:cover 以确保图像拉伸到足以覆盖整个屏幕。

【讨论】：

【解决方案2】：

添加background-size:cover 让背景覆盖整个div。您的背景只会显示在其中包含的内容后面。您需要更改容器的高度或填充和/或添加更多内容以查看整个背景。

.wrapper {
    background-image: url(../images/backgrounds/desktop.jpg);
    background-size: 100%;
    background-position: top;
    background-size:cover;
    width: 100%;
    height: 100vh;
    min-width: 950px;
}

【讨论】：

@RobertClarke 您的背景仅显示在 div 后面。 div 现在仅限于表单。添加更多填充或内容，或更改 div 的高度
@RobertClarke 你做了什么？最好接受答案或编写自己的答案，以便未来的访问者可以看到问题是如何解决的

【解决方案3】：

我的解决方案是将<div class="wrapper"> 的高度设置为 100vh。

.wrapper {
    height: 100vh;
}

这会将分隔线的高度设置为窗口视图高度的 100%。在它达到表格高度的 100% 之前。

【讨论】：

【解决方案4】：

尝试替换

background-image: url(../images/backgrounds/desktop.jpg);

与

background:url(../images/backgrounds/desktop.jpg) no-repeat scroll;

【讨论】：