+ Start a Discussion
lvivaninlvivanin 

Background image in visualforce page

After reading the documentation I did following

1. created sample CSS file named customStyles.css:

 

<style type="text/css">
body { background-image: url("images/SFSummary.gif") }
</style>

 

 2. Zipped up the images folder and customStyles.css together as myStyles.zip

 

 3.  Uploaded myStyles.zip as Static Resources with the name myStyles

 

 

 4. Referenced the stylesheet in visualforce page:

 

<apex:page standardController="Mileage__c" extensions="MileageExtension" tabStyle="Mileage_Custom_View__tab" standardStylesheets="false" >
<apex:stylesheet value="{!URLFOR($Resource.myStyles, 'customStyles.css')}"/>
.......
.......
.......

 

 It does not work. Couldn't figure out .....

 

 

 

 

 

Edwin VijayEdwin Vijay

All you have done is correct except at one line..

 

 

<apex:stylesheet value="{!URLFOR($Resource.myStyles, 'myStyles/customStyles.css')}"/>

 

 hope this solves...

 

Cheers!! 

 

lvivaninlvivanin

first of all, sorry for the late response from my part. i was starting this issue as a part of the  visualforce Self-study. now again i got time to return to this issue  &  i could not make it work.

 

all i am trying to do is display background image  on a Visualforce Page. trying to follow the documentation under 'Using Static Resources'

 

i have myStyles folder which contains images folder and customStyles.css file.
the images folder contails SFSummary.gif file.


Following is the customStyles.css

<style type="text/css">
body { background-image: images/SFSummary.gif; }
}
</style>

 

 created myStyles.zip which contains both images folder & customStyles.css file

 

 customCSS is my static resource name that has references the myStyles.zip file

 

following is my call in visualforce page

 

 

<apex:page controller="exampleCon" standardStylesheets="false">
<apex:stylesheet value="{!URLFOR($Resource.customCSS, 'customStyles.css')}"/>

 

i also tried with the options

 

 


<apex:stylesheet value="{!URLFOR($Resource.customCSS, 'myStyles/customStyles.css')}"/>

 

 

<apex:stylesheet value="{!URLFOR($Resource.customCSS, 'customCSS/myStyles/customStyles.css')}"/>

 

 

 it should not be that hard but i am unable to make it work.

 

your help is appreciated!

 

Chiru GChiru G

For full size background image in visulaforce using below code.

<body style="background-image:url('{!$Resource.background}');">
</body>

mollydogmollydog
Hi lvivanin, did you ever get this working and were you trying to render VF page as PDF?