Question

我需要一些有关CSS的帮助，我已经尝试了数小时来使背景全屏显示。

这是我的CSS：

.mainContainer{
    width: 70%;
    display: table;
    margin: 0 auto;
    padding-top: 100px;
}

html{
    height: 100%;
    margin: 0;
    border: 0;
    padding: 0;
    background-image: url(../assets/background.jpg);
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
}

这是我的html：

<html>
<div class ="mainContainer">
<app-header></app-header>
<router-outlet></router-outlet>
</div>
</html>

这是半途而废的问题，因为一旦我的内容停止运行，背景就会停止，直到浏览器窗口结束时，背景才会继续。

示例：

我正在尝试使背景向下移动并使用浏览器动态调整大小。

Answer 1

您的HTML代码缺少body标记。添加该内容，并将body { min-height: 100%; }添加到您的CSS中-这还将把body的高度拉伸到至少窗口的高度。

Answer 2

在CSS中，100%在垂直方面是坏的。尝试100vh，这是查看高度的百分比。另外，100vw是观看宽度的100％。还有vmin和vmax。希望这会有所帮助！

Answer 3

几件事：

就像另一个人说的那样，使用<body>标签。
添加100％的宽度
在background-image规则中，您应该在URL周围使用单引号，因此它看起来像：background-image: url('../assets/background.jpg');

最后，您应该使用DOCTYPE。 https://en.wikipedia.org/wiki/Document_type_declaration

.mainContainer{
    width: 70%;
    display: table;
    margin: 0 auto;
    padding-top: 100px;
}

body{
    height: 100%;
    width: 100%;
    margin: 0;
    border: 0;
    padding: 0;
    background-image: url('https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg?auto=compress&cs=tinysrgb&h=650&w=940');
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
}

<!DOCTYPE html>
<html>
  <body>
    <div class ="mainContainer">
    </div>
  </body>
</html>

此外...在嵌入的堆栈溢出代码中，我认为您不能使用自定义元素。

Answer 4

感谢大家的帮助，问题出在有角度的材质样式上，该样式覆盖了我的背景图像标签，并出于某种原因在其上添加了边框。

我通过在HTML CSS前面添加:: ng-deep来修复它，如下所示：

::ng-deep html{
    background-image: url('../assets/background.jpg');
    background-position: center center !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

另外背景无法全屏显示的问题是因为我缺少body标签和body { min-height: 100%; }

CSS全屏背景

4 个答案: