Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

text over image

Avatar

Level 3

Hi Team,

I would like to add a text over the image. Image is need to add as a background. Image also needs to have  editing feature. Over the image a text need to place, The text is also an editable one.How i can implement. The sample screenshot given.

Please help me to resolve the problem.

Thanks,

Ragam

1 Accepted Solution

Avatar

Correct answer by
Level 10

Use HTML/CSS available here: https://css-tricks.com/text-blocks-over-image/

Accordingly create dialog to author things like images, title , text,  alt text ( for help take a look at OOTB image component)

View solution in original post

4 Replies

Avatar

Level 1

Hello,

I have the same problem with the web http://teinteresa.emiweb.es/,  could you fix it?

Avatar

Correct answer by
Level 10

Use HTML/CSS available here: https://css-tricks.com/text-blocks-over-image/

Accordingly create dialog to author things like images, title , text,  alt text ( for help take a look at OOTB image component)

Avatar

Administrator

Hi 

You can achieve this by creating a custom component. The component would ask for Text as a field in dialog box and image to be uploaded.

Then at JSP/Sightly level, we can mark text over the image using out custom CSS.

Link:- https://helpx.adobe.com/experience-manager/using/uploading-files-aem1.html (Custom component for Image uploading).

 

Example (NON AEM):- http://codepen.io/KatieK2/pen/AIBEf  (Code and CSS to Show you Text over Image)

I hope this would help you.

Thanks and Regards

Kautuk Sahni



Kautuk Sahni