So I’ve been fighting this week with “Hero Images” – images with a text overlay. Now, the regular style is not a full overlay, but text usually positioned at the bottom or top of the whole scenery. What I needed was horizontally (easy) and VERTICALLY centered text (hard). So this is actually a case of “Text over Image Overlay”. But in common literature (read: tutorials and how-tos on the interwebz), its also being called “hero image”, ie. kinda interchangeable.

Thus, I dug meself through a horrendous amount of its variations .. finishing up with the variant detailed at The Stiz Media – which has been the only one working reliable so far. The client wanted a 100% overlay with a colored background, on top of a background image, text in a highlighting color positioned over it.

Thus, I adapted it with an additional layer to properly position the content, and also being able to add a link tag around it.

Also note: If you add a bit more stuff, ie. more containers, you need to define their flexbox properties manually for EACH new element you introduce. That seems to be the major PITA why we “old ones” are coping that bad with flexbox, grid, and the likes.