I’ve got a quick question that’s been puzzling me for a couple of hours today. On a site I am working on for a client-he wants a complex shape but with text over it. What I’ve done in the past is use a position absolute svg with custom styling and then the text is fine as is. But the problem I am facing is the box containing the text is not as large as the svg shape so flex box is not respecting it and thus bringing the whole site up going over the svg image. I can’t think of any solutions and could use a little bit of help! Oh and this is done in react if that makes it easier or harder. Thanks y’all!

CodePudding user response：

If you want to have text over an image, you can try to set the image as a background of your container. From there you can change the size and position of your background. Add it on your css file

.customContainer {
  background: <background-image>
}

CodePudding user response：

Okay! Check this and try this [https://www.w3schools.com/cssref/playdemo.asp?filename=playcss_background-image][1]