[Support request] how to create this type of style behind text?

[Shami]

View post on imgur.com

I want to create this style behind text using generateblocks.

Is it possible?

If yes, then how?

[Fernando]

Hi Shami,

Can you provide the link to your reference site? We’ll check how it’s done and see if it’s possible.

You may use the Private Information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

[Shami]

sure

[David]

Hi there,

you need your own image for the background then:

1. Add this CSS to your site:

.custom-highlight mark {
    position: relative;
}

.custom-highlight mark::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1em;
    background-image: url('your_image_url');
    background-repeat: no-repeat;
}

Replace the your_image_url with your images full URL.

2. Then on your page, add a Headline block with your text. Hightlight the word you want the background for and in the block toolbar 3 dot menu select Highlight ( the top icon ).

3. With the Headline block still selected, in Advanced > Additional CSS Class(es) add: custom-highlight

You will need to make sure you have an image that is the appropriate proportions for the text you want to highlight.

[Author]

Posts