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

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") }


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


 3.  Uploaded 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...





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; }


 created which contains both images folder & customStyles.css file


 customCSS is my static resource name that has references the 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}');">

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