Html 网站背景图像未显示在整个页面上

我网站上的背景图片没有显示在整个页面上。它位于div

.hero image

问题截图：

---

这是因为

高度：100%

，背景没有显示在整个页面上，因为

.hero image

元素的高度没有到达整个页面。试试这个：

.hero-image {
  height: calc(100vh - 'your navigation bar height'px);
  /*Other css rule*/
}   

---

上面的CSS代码所做的是将

.hero image

元素的高度设置为

浏览器视图高度的高度减去导航栏的高度。这使得您的
.hero image
元素占据了浏览器视图中的所有空间
您的hero image div在哪里？@Maze90我的道歉，我已经编辑了信息。
.hero-image{
    background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("img/Header.jpg");
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.hero-image {
  height: calc(100vh - 'your navigation bar height'px);
  /*Other css rule*/
}