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
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.
If you specify
z-index
on an element, it gonna impacts his descendants too. If you specify a negativez-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 indirectlyz-index
for him)