function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
ManjunathManjunath 

Overlapping text on image

Hi,

 

Is there a possibility where in we can overlap text on image.

 

Regards,

Manjunath

Best Answer chosen by Admin (Salesforce Developers) 
sfdcfoxsfdcfox

Yes. You can use any HTML/CSS you'd like, such as using CSS background-image.

All Answers

sfdcfoxsfdcfox

Yes. You can use any HTML/CSS you'd like, such as using CSS background-image.

This was selected as the best answer
ManjunathManjunath

Hi,

 

Can you give me a small example plz.

 

Regards,

Manjunath
sfdcfoxsfdcfox
<apex:page >
  <div style="background-image: url(https://www.google.com/images/srpr/logo3w.png); height: 100px; background-repeat: no-repeat">
      This is text that overlaps the image for the Google image, as an example.
  </div>
</apex:page>

 
Ashwin KhedekarAshwin Khedekar
You can use CSS styling :-
position:absolute; for foreground image. Foreground image is text written in Microsoft Paint and small section of it is cut using the utility "Snipping Tool" and saved as a .png (image) file on computer. So this text will overlap on the background image (over a small part of the background image).

Use CSS styling :-
position:relative; for the background image. (Again saved anywhere on computer as .png file).

Upload these two files as static resources in Salesforce :- In below code :-
ForegroundImage1 is name of 1st static resource which is a .png file directly uploaded as a static resource (without zipping it). Uploaded as a static resource from this path :- Setup -> Develop -> Static Resources -> New
BackgroundImage1 is name of 2nd static resource which is a .png file directly uploaded as a static resource (without zipping it).

The below Visualforce page demonstrates this. Browse for this VF page using URL :-
https://c.ap5.visual.force.com/apex/vfOverlapImage
where vfOverlapImage is the name with which below VF page is saved.

VF page vfOverlapImage code starts :-
<apex:page>
  <head>
    <style>
      .containerStyling {
        width: 100%;
        height: 150px;
        position:relative;
      }

      .overlappingImageStyling {
        float: left;
        position: absolute;
        left: 10px;
        top: 20px;
        height:100px;
        width:50px;
      }
            
    </style>
  </head>
  
  <div class="containerStyling">
    <div class="overlappingImageStyling">
      <img src="{!$Resource.ForegroundImage1}" width="50px" height="100px"/>    
    </div>  
    <img src="{!$Resource.BackgroundImage1}" width="100%" height="150px"/>
  </div>
</apex:page>