Custom Background to Text

Support
#1

Hi, is there a way to add a custom background to text or headline element so it’s neither a solid colour of gradient, the idea being adding inline SVG like this:

So that the text itself changes colour

#2

Hello @wolfproductions,

Thanks for writing to us.

By default, the Headline element allows you to set a background color or gradient for the text, but it does not provide an option to use a background image.

As an alternative, add a Div element and set the background image on it. Then, place the Text or Headline element inside the Div. The background image will appear behind the text.

Hope it helps
Thanks

#3

Thanks Prakash, I will look into this solution. Appreciated

#4

So I have added a Div element, added inline SVG mesh as custom to the background, then added text within the div, it’s just a background:

image
image1383×195 87.9 KB

What am I missing please? I want to make the text transparent so that the mesh svg affect IS effectively the colour of the text. Thanks

#5

Hello @wolfproductions,

I would suggest you go to the text element -> Color -> set the color to transparent. Please have a look at the screenshot below.

About-The-Tests-Page-Cornerstone-09-22-2026_04_59_PM
About-The-Tests-Page-Cornerstone-09-22-2026_04_59_PM1232×1054 105 KB

Thanks

#6

Thanks Prakash, all it does it make the disappear completely though:

image
image1315×124 25.3 KB

The background of the div is animated SVG (which is working) but the text just can’t be seen

#7

Hello @wolfproductions,

In order to help you with your concern please share your details in a secure note. Please provide the following details

  • WordPress Login URL
  • Admin-level username and password
  • Exact page URL

You can find the Secure Note button at the bottom of your posts

secure-note
secure-note1040×250 15.3 KB

Thanks

#8

Thanks Prakash, just replied, you will see it on the homepage.

#9

Hello @wolfproductions,

I would suggest you please remove the Div element and go to the Headline element ->Customize ->Element CSS, and add this custom CSS code.

$el .x-text-content-text-primary {
    color: transparent;
    -webkit-text-fill-color: transparent;

    background-image: url("YOUR_SVG URL");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    -webkit-background-clip: text;
    background-clip: text;
}

The purpose of providing custom CSS is to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector, or you can subscribe to One where customization questions are answered.

Hope it helps.
Thanks