How do I use JavaScript to adjust the linear gradient of the background: property when there is also an image url in it?

Question

I have created some JS to make a Panel slide in from right Viewport when a user hovers over an arrow. The background for the page has an img as well as a linear gradient overlay. I want the overlay to darken when the panel comes out/is out. In my code, the background disappears because I do not know how to include the img path.

//Hank Williams Slide-In Banner on Main Page
document.addEventListener("DOMContentLoaded", function() {
    let rightChevron = document.querySelector(".right-chevron");
    let slideInContainer = document.querySelector(".slidein-container.hank");
    let pageOpacity = document.querySelector(".header-cover-main");
  
    // When mouse enters the right chevron
    rightChevron.addEventListener('mouseenter', function() {
      setTimeout(function() {
          rightChevron.style.transform = "translateX(10px)";
          rightChevron.style.transition = "all ease-out 200ms";
          rightChevron.style.opacity = "0";
      }, 100); 
  });
 
    rightChevron.addEventListener('mouseenter', function() {
    setTimeout(function() {
        slideInContainer.style.transform = "translateX(-500px)";
        slideInContainer.style.transition = "all ease-out 300ms";
        pageOpacity.style.background = "linear-gradient(180deg, rgba(30, 30, 30, 0.75) 50%, rgba(30, 30, 30, 0.75) 70%)";
    }, 300); 
});
    
    // When mouse leaves the slideInContainer
    slideInContainer.addEventListener('mouseleave', function() {
        // Hides the slide-in container by moving it off-screen
        //Repositions chevron
        slideInContainer.style.transform = "translateX(500px)";
        slideInContainer.style.transition = "all ease-in 500ms";
        rightChevron.style.opacity = "1";
        rightChevron.style.transform = "translateX(0px)";
        rightChevron.style.transition = "all ease-in 100ms 300ms"
        
    });
});

header-cover-main {
  position: relative;
  z-index: 0;
  background: linear-gradient(180deg, rgba(30, 30, 30, 0.55) 50%, rgba(30, 30, 30, 0.55) 70%), url("../../img/CoverPage/CoverPic.jpg");
  background-size: cover;
  background-position: top center;
  height: 100vh;
  display: grid;
  grid-template-rows: [row1-start] 5% [row1-end row2-start] 70% [row2-end row3-start] 20%;

  @media screen and (max-height: 500px) {
    grid-template-rows: [row1-start] 5% [row1-end row2-start] 70% [row2-end row3-start] 15%;
  }

  @include mix.respond(lap-desktop) {
    grid-template-rows: [row1-start] 5% [row1-end row2-start] 60% [row2-end row3-start];

  }
}

.slidein-container {
    position: fixed;
    height: 100vh;
    width: 500px;
    z-index: 900;
    &.hank {
        background-image: url("../../img/CoverPage/SlideIn-Hank.png");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: left;
        right: -500px;
        
    }
}