做出主页背景图片填充屏幕

Question

我有一个路由器的反应应用程序。我也有一个导航栏。 我希望我的主页有一个填满整个页面的背景图片：

html, body {
  height: 100%;
}

.Main .bg {
  width: 100%;
  height: 100%;
  background-image: url("../resources/top-bg6.jpeg");
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover; 
}

然而，这会导致图像在高度56px处被裁剪。 我认为原因是由不同的组件和路由器引起的所有封装div。

如果我尝试

.Main .bg {
  ...
  height: 100vh;
  ...
}

出现滚动条。我该处理它吗？ 编辑：添加了截图：

Answer 1

一切都很棒，但您的代码中有一些变化。 仅在.Main div上应用100vh高度并更改.bg background-position = center。 现在，您的图像位于背景的中心。这取决于您的图像尺寸。