Clip image to text span

Updated

Add some variety to your site's copy with text spans and image text fills.

Combine the power of text spans and image text fills to create Headings that stand out — all while still remaining selectable and search engine friendly.

How to wrap text with a span

To affect specific text within a Heading, add a span to it:

  1. Choose your Heading and double click it to begin editing
  2. Select the word or words you want to add to the span
  3. Select the Wrap with Span "brush" icon in the options above your selection

Great! Now you have a span created in your Heading.

Don't forget to add a class to your span to keep your styling organized (e.g., "Image background).

Read more about inline text formatting using text spans.

How to add a background image to the text span

Let's add a background image to the text span — this image will appear within the text:

  1. Open Style panel > Backgrounds
  2. Click the Image and gradient "plus" icon
  3. Click Choose Image to select the image for your text fill
  4. Set the Size to Cover
  5. Click a dot under Position to adjust how your background image is displayed (e.g., select the center dot)

Read more about background images.

Important

Be sure to check your text span's image color contrast and legibility to ensure the text is accessible with its background. Learn more with our accessibility course.

How to clip the image background

Finally (this is where the magic happens), let's clip the image background to the text span:

  1. Select the text span
  2. Open Style panel > Backgrounds
  3. Choose “Clip background to text” from the Clipping dropdown menu

Read more about gradient and image text fills in the Webflow Designer.

And that's it! You've created a visually intriguing Heading on your site to wow your site visitors.

‍

Related articles