html - Text not over Image on View change

Question

I was looking for a solution where I have text on top of an image.

I found solutions similar to this:

                        <div>
                            <div class="centered" style="position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);">
                                No Events found
                            </div>
                            <img src="https://www.steelmint.com/nw/public/images/events-01.svg" alt="Snow" style="width:100%;
position:relative; text-align: center; opacity:0.4;">
                        </div>

Now I realized due to the position-style my text will be displaced if I for example

• Zoom in/out
• Change Window Height/Width
• Switch to Smartphone-View

How is this usually solved so my text stays over my image?

My idea was to just create an image where the text is part of the image and then bind that image to my <img>- Tag. Is this a common way to do?

Answer 1

Simply use the class on the wrapping div and give it a position: relative; like in the sample below. Then let the div with the text span the entire parent div by using position: absolute; in combination with top, bottom, left and right: 0;. For adding a opacity effect, use rgba as background color instead. It will not cause the same issues as opacity which is rendered last. Use a positive z-index to span the text above the image layer wise.

.text-image-wrapper {
  width: 100%;
  position: relative;
  object-fit: contain;
}

.text-image-wrapper div {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.5);
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.text-image-wrapper img {
  width: 100%;
}

<div class="text-image-wrapper">
  <div>Some Exampel Text</div>
  <img src="https://www.tacoshy.de/Images/Yoshi/IMAG0735.jpg">
</div>