I’ve been trying to find some examples online but so far haven’t turned up anything.
What I’m trying to do is set a background SVG image on the first word of a heading which expands depending on the length of the word. The heading could potentially be several lines long as well but the image should only be positioned on the first word. There is also the complication of making it responsive but also allowing the image to overlap onto the next word if the first is quite short (i.e. so the image isn’t clipped).
I started looking at a simple solution using background size and background position but this would require setting up and adjustment of several media queries.
There is no first-word in css unfortunately so the only option is to add some spans around the first word and use that to add that image. You could add the spans dynamically with JS as there are some old scripts around but I’m sure you can find better.
Once you’ve added the spans then you can do something like this.
It would be up to you to determine what the shortest width (min-width) you will allow as I doubt there’s a way to do that without a lot of scripting.
Hope it helps but it should serve as a starting point
