Skip to main content
askdctm
Level 9
Apr 19, 2016 10:16 AM UTC
Solved

Overlay text on HTML smart Image component

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.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Hemant_arora
Hemant_aroraAccepted solution
Level 8
Apr 19, 2016 10:22 AM UTC

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>

View in thread

3 replies

edubey
edubey
Level 10
Apr 19, 2016 10:20 AM UTC

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

Translate
Hemant_arora
Hemant_aroraAccepted solution
Level 8
Apr 19, 2016 10:22 AM UTC

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>

Translate
askdctmAuthor
Level 9
Apr 20, 2016 3:45 AM UTC

Hi Praveen/Hemant,

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

Translate
Terms & ConditionsAccessibility statement

Loading footer...