skip to Main 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.

2

Answers


  1. 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.

    Login or Signup to reply.
  2. 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 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="#" target="blank">Photographer</a></p>
        </div>
      </div>
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search