Text Background Graphics

Questions
1

Hi,

How can I get such a design on a portion of text on a header in Bubble?

image
image2268×581 41.2 KB

2

make the background design on figma and export it svg and use it as a background image.
Or inject a custom css.

3

background image for the page?

4

For that specific text

5

How do you do that? I can’t find an option lol…maybe I’m missing it?

6

Inspect element is a very useful tool. Right click on the text, and click inspect. There, you can see the text is wrapped in a class called “text-highlight” that has the following CSS applied:

    background-image: url(../a/img/highlight.png);
    background-size: contain;
    background-position: bottom;
    background-repeat: no-repeat;

The image URL you’d want to use is not the one they have, since they are storing the image locally.

Using inspect element, you can see and learn a lot about how other developers do stuff.

How do I use CSS on Bubble?
HTML Elements.

7

Sorry, I’m on my phone😅, you can use this :

IMG_6101
IMG_61011290×2796 216 KB

8

Got it. Will definitely use that.
I remember using Inspect Element in Elementary School to mess with websites, but I guess I can now do something useful with it. :slight_smile:

9

Oh, I glazed right over that. Thank you so much.