How to use img tag as background of banner with interactable content?

I want to use an img on my page as background-image of an image-slide banner. The reason is to include alt-text for accessibility reasons. To move the img in the background, I have to give it a negative z-index. Otherwise, it always shows on top of the content. Tag-Lines are included on the banner as h1 titles. These titles can't be selected or interacted with, once the banner is in the negative z-index. So far, there is no problem. However, some of the background-images I want to include on some pages, were not taken by myself, so they need an image credit. The link which leads to the original-photo on the image-credit can't be clicked on. Optically, it's shown above the image and the banner, but it can't be clicked on. So is there a way to make the content of the banner interactable. I could include the image as background-image, but in this case, how can I include alt-text to the background-image?

.slider {
    width: 100%;
    position: relative;
    height: 600px;
    z-index: -1;
}
.banner {
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.banner-image {
    position: fixed;
    top: 0;
    left: 0;
    object-fit: cover;
    width: 100%;
    height: 640px;
    z-index: -2;
}
.image-credits {
    background-color: black;
    color: white;
    padding: 2px 8px;
    margin: 10px;
    position: absolute;
    bottom: 0;
    right: 0;
}
.image-credits a {
    color: white;
}

<div class="slider">
  <div class="banner">
    <img class="banner-image" src="https://via.placeholder.com/1280" alt="Description, what you see">
    <div class="content">
      <h1>Some tagline</h1>
      <p class="image-credits">Photo by <a href="image-source" target="blank">Photographer</a\></p>
    </div>
  </div>
</div>

I tried setting the page up with positive z-values. But then the background-image always shows on top of the rest of the content on the page, and the content remains interactable. Also, I applied pointer-events:none; to all other elements of the slider, except of the image-credits. That also didn't work out.

Seems its not workin when you set z-index both parent and child elements. Try to remove z-index from .slider and it should work.