+ Start a Discussion
RDeepaRDeepa 

How to place text over image in visualforce using <apex:image> component?

Hi,

 

I need to place the text over image in visualforce using <apex:image> component. It works fine with background-image in <div> tag. But, I am not able to adjust the width of the image. I m reusing the same image at different places in the page. So, I cannot fix the size at the image level and use. I need to adjust the size in code level.

 

Please suggest me on this.

cvuyyurucvuyyuru

Use title attribute in the <apex:image>

 

like this

 

 

<apex:image value="{!$Resource.image}" title="Test"/>

 

 

This works..

JitendraJitendra

Hi RDeepa,

Please try below CSS for your image tag.

div
{
background:url(image_Path);
background-size:80px 60px;/*Image Size - This will help you*/
background-repeat:no-repeat;
}

 

RDeepaRDeepa

Thanks for your reply. I have kept a curved image in the static resource. When I reduce the width of it, the edge of the image is not similar to the actual one. It cuts the 2nd half of the image, if i reduce the size. It is not compressing the image. If i try with the apex:image component with the adjusted width, it comes fine. Please suggest me. Is there any way to include the text over image with the help of apex:image component.

 

 

caimagecaimage

there is somes codes about text over image in c#, not in visualforce, but you can change it into something useful to help you.