我试图把一个图像覆盖，但这个覆盖是在顶部的菜单栏上延伸，我不知道如何坚持这只在图像上。
我已经尝试做不同的事情与调整图像，改变位置，但它不断超过菜单栏。当我调整顶部的位置，这是一个小修复全屏，但一旦在移动的它不会工作与菜单被隐藏。当尺寸改变时，它也会在图像下方流动。

header {
  border-bottom: 5px solid coral;
  font-family: Arial;
}

header a {
  display: inline-block;
  text-decoration: none;
  color: inherit;
}

.bg-image {
  background-image: url('https://images.pexels.com/photos/1647120/pexels-photo-1647120.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
  background-size: cover;
  background-position: center;
  background-color: blue;
  background-repeat: no-repeat;
}

.vh-80 {
  min-height: 80vh;
}

.banner-text {
  color: white;
  font-size: 3rem;
  text-align: center;
  font-family: Arial;
}

.bg-overlay>* {
  position: relative;
}

.bg-overlay::before {
  content: "";
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0;
  right: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

个字符
我试着改变部分，试着用相对位置的东西，但都不起作用。