Overlay text on HTML smart Image component | Community
Skip to main content
Level 9
April 19, 2016
Solved

Overlay text on HTML smart Image component

  • April 19, 2016
  • 3 replies
  • 1028 views

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.
Best answer by Hemant_arora

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>

3 replies

edubey
Level 10
April 19, 2016

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
Hemant_aroraAccepted solution
Level 8
April 19, 2016

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>

askdctmAuthor
Level 9
April 20, 2016

Hi Praveen/Hemant,

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