How to position text on top of an image using TailwindCSS
https://codepen.io/Ant-Riddle/pen/xxeOJaN
I just started using tailwind and I'm reading their docs, got into a bit of a problem trying to use z-index to position text on top of an image
4 Replies
trying to get something like this
The easiest way is to use the image as a background image on the container that’s holding the text since it’s a decorative image anyway.
oh right I was thinking too hard lol it was that simple 😅
but if you had to do it using a image rather than a background image how would you go about it?
If it had to be an img tag, you could use grid to set the img to grid-column: 1 / -1; grid-row: 1 / -1 and then place the text in the middle columns and rows. Could also use position absolute. Or use a pseudo element for the image.