[gatsby-plugin-image] Text overlay

[ronaldvdv]

Hi! I'm using the amazing new gatsby-plugin-image. Now I would like to add a (CSS-styled) text overlay on top of my image. What would be the best approach to guarantee that this overlay

• is positioned at the bottom of the image
• has the same width as the image, even when resizing the browser

[LekoArts]

You could follow this guide: https://www.gatsbyjs.com/docs/how-to/images-and-media/using-gatsby-plugin-image#background-images

I mostly did it this way in the past (when CSS grid wasn't so widely supported):

• wrap image and text div with a relative container
• use absolute position to display text div over image + add styling to expand it to the size of the relative parent

[ronaldvdv]

That works great, no clue why I didn't consider that section for my question (apologies). Thanks a lot!!!