Attaching an image to position of specific words in paragraph

[Alistair_Gallop]

Hey, I want to use some sketch images (underlines, scribbles etc) to compliment my text in a paragraph. Is there any way to lock the image to the position of specific words? So that as they move in a responsive way the images will stay where they need to be? Image below to show what I mean:

---

Here is my site Read-Only: https://preview.webflow.com/preview/alistairs-first-project-e51933?utm_medium=preview_link&utm_source=designer&utm_content=alistairs-first-project-e51933&preview=ec9e9cf99f2993e5208203623534af81&pageId=5f16eb7be17d45b77356aaf7&mode=preview
(how to share your site Read-Only link)

[Stephen_Wise]

Hey Alistair, your read-only link isn’t working but here’s how I’d approach the situation:

Highlight the text you want the underline to be on then wrap a span around that text > Give that span a name.

Now click on the class and add a background image > select the image and use the controls to make the image span the area and align to the bottom. [You may also need to increase line-height of your text]

Let me know how you get on + please reshare your read-only link!

[Alistair_Gallop]

Hey Stephen, that is just a photoshop mock at the mo, just building on webflow now

I did look at using a text-span however that creates the wrap tight to the top and bottom of the text which means I can’t get the image positioned below the text. You will see on the link that when you move the image down to be below the text, it goes out of view

[Alistair_Gallop]

Take that back. I fixed it and it works perfectly using that method. Thanks for your help @Stephen_Wise

[jakubfoglar]

Hey Alistair!
I have a similar issue – have you figured out how to get rid of this clipping? I want to make the bubble larger than the words it spans, can’t figure it out!

Thanks!
Jakub

Screen Shot 2020-10-13 at 14.37.39|690x290

[maggy]

Did you figure it out? I’m trying to do the exact same effect with the circle around text

[jakubfoglar]

I didn’t. I think what I did is set the height to 100%, which made the ellipse smaller. Therefore, there is no cut-off anymore, but it’s small, so it doesn’t circle nicely around the whole text… Let me know if you find a better way!

[maggy]

Couldnt make it work either.
I was looking at how Timothy Ricks does it on his Wizardry website and ended up doing that.
He wraps the whole text in a div set to relative. Then the image is absolute with a higher z-index…
It works if all your sizing is done in ems (haven’t checked responsivity yet…)

I was hoping for the span/background-img to work though, it seems like it’d be a more elegant solution.