Overlay text on HTML smart Image component

[askdctm]

Hi All,

I need to create a component which has HTML smart Image with an overlay text on it.

Could not find any reference articles on the same. 

Any pointers/reference on this will be helpful.

[edubey]

1. Create a new component

2. Have 2 fields in dialog, one is take image and second being text input

3. Use HTML structure shown here https://css-tricks.com/text-blocks-over-image/

Thanks

Praveen

[Hemant_arora · Accepted solution]

You can create a copy of the text image component in your project

change the property names and title as per requirement

In your component jsp, keep the image in background and keep the text in foreground.

e.g. <span style="background:url({properties.image})">Hello</span>

[askdctm]

Hi Praveen/Hemant,

Sorry for the delayed response. Will try on this and post back my results.