function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion

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



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.


Use title attribute in the <apex:image>


like this



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



This works..


Hi RDeepa,

Please try below CSS for your image tag.

background-size:80px 60px;/*Image Size - This will help you*/



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.




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