I'm trying to put an overlay on an image, but this overlay extends to the top menu bar and I don't know how to just paste it on the image.

I've tried different ways of resizing the image and changing the position, but it still stretches over the menu bar. It's a small fix for full screen when I adjust the top position, but once on mobile it won't work since the menu is hidden. And, when the size changes, it flows underneath the image.

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)); }

 
  
Logo
  
  
  
 
 
IT'S ALL GOOD
 
 

I've tried changing parts, I've tried the relative position method, but nothing worked.