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
nagalakshminagalakshmi 

how to display the static resource as footer image in visual force page

Hi,

 

Any one please help me for displaying the static resource as footer image in visual force page(render as=pdf). I tried a lot but i am not getting. Thanks in advance.

 

 

Thanks,

Lakshmi.

Navatar_DbSupNavatar_DbSup

Hi,

 

You can use the CSS (cascading style sheet ) to set the position and size of the footer and place the image in the footer div which you want to display in the footer of the page.

 

Did this answer your question? If not, let me know what didn't work, or if so, please mark it solved. 

nagalakshminagalakshmi

Hi Jain,

 

Thanks for your reply.. Can you Post code for displaying image as footer. Because i tried with css also. But it is not displayed.

 

Thanks,

Lakshmi.

Navatar_DbSupNavatar_DbSup

Hi,

 

try below code sample:

 

<apex:page renderAs="pdf" standardStylesheets="false" controller="chkrenderinginpdf" >
<style>
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
</style>

<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer">sdadsa<apex:image value="{!$Resource.imagename}" height="60px" /></div>
</div>

</apex:page>

 

 

nagalakshminagalakshmi

Hi Jain,

 

Thanks for your reply.. I tried this code but the image is displayed on top of the page.. can you help for displaying it in bottom.. 

 

Thanks,

Lakshmi.

VishwanathVishwanath

Hi,

 

Try this code hope it wil help u

 

<apex:page controller="testcontr"  renderAs="Pdf">
    <html>
    <head>  
<style type="text/css">	
	 @page {          
                @top-center {                   
                    content: element(header);               
                            }
                @bottom-left {
                    content: element(footer);
                            }           
                 }                       
         
            div.header { 
                padding: -5px;              
                position: running(header);           
                        }           
            
            div.footer {
                padding:-5px;
                position: running(footer);                                   
                        }

						</style>
						</head>
						<body>
	  
	  <div class="header">   
                <apex:outputText value=" Header of the Page "/>
            </div>

            <div class="footer" align="center"> 
                 <img style="WIDTH:150px; HEIGHT: 100px" src='{!URLFOR($Resource.image)}' title="logo" align="right"/>
                   
            </div>
			</body>
			</html>
			</apex:page>

 

Rachel SingerRachel Singer
HI,
I tried this code, he image display at the bottom of the page but only the top half of it...
Do you know why?
Shelly NyeinShelly Nyein
I have the same problem as you. Half of image is covered when I use padding. But, if I removed padding value, the image size is too small and poistion is not right. Refer to my image. Can anyone of suggest on this? User-added image