div to only show on background image

Question

On this website - Uggerhøj Improve , I would like the little div in bottom right corner (the one that says Fotograf: Erik Refner ) to only appear on the background image. When I scroll down and get past the image to the black background, the text should disappear behind the background. I've tried z-index: -1 but I'm not sure how to use the z-index properly. Can you help me?

Answer 1

The z-index of the background should be lower than the z-index of the bottom right div, and the z-index of the bottom right div should be greater than the z-index of the background

So something like this?

section
{
    z-index: 6;
}

.fotograf 
{
    z-index: 5;
}

Note that the numbers I am using here are just examples.

Answer 2

You need to set the position property to a value other than static in order for the z-index to be considered. Also, the z-index of the element that should appear on top should be higher than the z-index of the element that should be hidden.
In your case, the div on the bottom ( Fotograf ) should have a z-index of, say, 2. The background image should have a z-index of 1, so that it goes behind and the one with the black background should have a z-index of 3, so that it always appears on top.