function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
bohemianguy100bohemianguy100 

problem referencing image in static resource from my css

I have a zip file that includes both images and css files that I've uploaded as static resources.

 

In my css file, I have a style rule that references one of the images in the archived as a background image like so:

 

.even{background:transparent url('images/gradient-alt-row.gif') repeat; height:60px;}

 In my visualforce page, I reference the stylesheet like so:

 

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

 When I load the page, the background image is not displaying.  I've checked the style rule in Firebug and I can find the style rule, but Firebug indicates that the image failed to load.

 

Does the code above appear incorrect?  I've read the documentation and it shows this is the proper way to reference the image in the css?

 

Has anyone encountered this issue? 

 

Any help is appreciated.

Thanks.

Best Answer chosen by Admin (Salesforce Developers) 
bob_buzzardbob_buzzard

When you include the stylesheet, your "current working directory" is effectively 'css'.  Thus if your images directory sits at the same level as your css directory in the zip file, you'll need to give a relative path to find the images directory - ../images/

 

Thus your markup should be :

 

.even{background:transparent url('../images/gradient-alt-row.gif') repeat; height:60px;}

 

All Answers

bob_buzzardbob_buzzard

When you include the stylesheet, your "current working directory" is effectively 'css'.  Thus if your images directory sits at the same level as your css directory in the zip file, you'll need to give a relative path to find the images directory - ../images/

 

Thus your markup should be :

 

.even{background:transparent url('../images/gradient-alt-row.gif') repeat; height:60px;}

 

This was selected as the best answer
bohemianguy100bohemianguy100

Thanks Bob!  I appreciate it!