Streaming live at 10am (PST)

Attaching an image to position of specific words in paragraph

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)

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! :slight_smile:

1 Like

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

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

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

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

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!

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. :slight_smile: