Apex Code Development You need to sign in to do that
Don't have an account?
lvivanin 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 .....
All you have done is correct except at one line..
<apex:stylesheet value="{!URLFOR($Resource.myStyles, 'myStyles/customStyles.css')}"/>
hope this solves...
Cheers!!
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!
For full size background image in visulaforce using below code.
<body style="background-image:url('{!$Resource.background}');">
</body>