<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>
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.
Yes. You can use any HTML/CSS you'd like, such as using CSS background-image.
All Answers
Yes. You can use any HTML/CSS you'd like, such as using CSS background-image.
Hi,
Can you give me a small example plz.
Regards,
Manjunath
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>