背景未填满窗口的高度

时间：2019-06-16 16:02:44

标签： css background angular-material

当内容不足时，我的网站的背景图像不能完全覆盖窗口的整个高度，这是一个示例：

没有内容：

enter image description here

内容：

enter image description here

这是app.component.html：

<body>
  <!-- Background -->
  <div class="bg">
    <!-- nav -->
    <app-navbar></app-navbar> 

    <!-- Logo -->
    <div style="text-align:center">
      <img width="200" alt="BookCloud Logo" [routerLink]="['/books']" src="../assets/logo3.png">
    </div>

    <!-- App -->
    <div class="container">
        <app-alert></app-alert>
      <router-outlet></router-outlet>
    </div>

  </div>
</body>

这是app.component.css：

.container {
  width:100%;
  height:100%;
}

img {
  outline: none;
}

html, body{
  height: 100%;
}

.bg{
  position: relative;
  display:block;
  background: url('../assets/bg.jpg') no-repeat center center fixed;
  background-size: cover;
}

我做错了什么？感谢您的阅读。

1 个答案:

答案 0 :(得分：0)

您的CSS应该是

.bg{
  position: relative;
  display:block;
  background: url('../assets/bg.jpg') no-repeat center center fixed;
  background-size: 100% 100%;
}

如果这不起作用，请将.bg更改为body。

相关问题
最新问题