Text or Headings on a picture

Here is my codepen : https://codepen.io/osher-zalman/pen/OJLmqrJ

It has 6 Divs inside a Flexbox.
i am trying to add h1 / p / span so it will be placed on top of the picture(s),
i cant make it so far.

the only way i know how to do it is to use the all relative-absolute thing,
is there a better way?

i also tried z-index -1, still no luck.

thank you!

Edit: please notice that the page direction is ltr

Where are you trying to add the text?

Have a look at the z-index moz doc and on WC3, and you’ll realize that the property only work on positioned elements (fixed / sticky / absolute / relative).

Hi @VanDijk, I can’t see the pictures in the codepen you posted (I’m using the phone to connect to codepen).
Make sure to close the img tags like this:
<img src="…" alt="…" />

Instead of using the image as an element and having to implement something for positioning and z-indexing, you could treat is as a background for the div (check the CSS properties for backgrounds). That way you will easily be able to write on it. While you do that, do consider that the text and the image below it need to have a good contrast in order to provide accessibility to people with vision problems.

Edit: basically you could do something like this:

#idOfDiv{
  background-image: url("urlOfThePicture");
  background-repeat: no-repeat;
  background-size: cover;
}

By default the image is repeated both horizontally and vertically. With the background-repeat: no-repeat; you prevent that.
With background-size: cover; the image will be stretched or cut to fit the div to which it is applied.