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

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 >
  <div >
    <img  src="https://via.placeholder.com/1280" alt="Description, what you see">
    <div >
      <h1>Some tagline</h1>
      <p >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.

CodePudding user response：

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.

CodePudding user response：

If you specify z-index on an element, it gonna impacts his descendants too. If you specify a negative z-index, then the corresponding elements are going "behind" <body> element. Then all your click are on <body> element. As <body> have a transparent background, you could have the impression click on your link, but you are not.

To be able to click on your link, it should have no element with greater z-index in front. Below, I have made you an example without z-index on .slider (which is one of the ascendants of your link, so it specifies indirectly z-index for him)

.slider {
    width: 100%;
    position: relative;
    height: 600px;
}
.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 >
  <div >
    <img  src="https://via.placeholder.com/1280" alt="Description, what you see">
    <div >
      <h1>Some tagline</h1>
      <p >Photo by <a href="#" target="blank">Photographer</a\></p>
    </div>
  </div>
</div>