+ Start a Discussion
Scott.MScott.M 

Reference staticresource image from uploaded static resource css

Hi,

 

Is there any way to reference a staticresource image from css that's been uploaded as a static resource?

 

 

Best Answer chosen by Admin (Salesforce Developers) 
SteveAnderson41SteveAnderson41

I was going to reply yesterday, but I'm not sure I understand the question. 

 

If the image is in the same static resource (in other words, both the CSS and the image are in a zip file uploaded as a static resource), you don't have to do anything special.  The CSS will find the image is the path to the image is correct.

 

For example, say in mystyle.css I have the following:

 

 

body { background-image: url(stars.gif); background-color: #000000 }

 

I just create a zip file that includes mystyle.css and stars.gif and upload it as a static resource called testCSSWithImages, then reference the CSS in the normal way.

<apex:page showHeader="false" standardStylesheets="false"> <apex:stylesheet value="{!URLFOR($Resource.testCSSWithImages, 'mystyle.css')}"/> <h1>Congratulations</h1> This is your new Page: testStyles </apex:page>

 

My stars.gif file shows up as the background on my page.

 

This is documented in the Visualforce Dev Guide in the topic, "Static Resources".

 

If you are asking can a CSS in one static resource refer to an image in another static resource, I think the answer is no.

 

All Answers

Siddhesh KabeSiddhesh Kabe
No reply yet...am facing the same problem. Anyone to help us out???
SteveAnderson41SteveAnderson41

I was going to reply yesterday, but I'm not sure I understand the question. 

 

If the image is in the same static resource (in other words, both the CSS and the image are in a zip file uploaded as a static resource), you don't have to do anything special.  The CSS will find the image is the path to the image is correct.

 

For example, say in mystyle.css I have the following:

 

 

body { background-image: url(stars.gif); background-color: #000000 }

 

I just create a zip file that includes mystyle.css and stars.gif and upload it as a static resource called testCSSWithImages, then reference the CSS in the normal way.

<apex:page showHeader="false" standardStylesheets="false"> <apex:stylesheet value="{!URLFOR($Resource.testCSSWithImages, 'mystyle.css')}"/> <h1>Congratulations</h1> This is your new Page: testStyles </apex:page>

 

My stars.gif file shows up as the background on my page.

 

This is documented in the Visualforce Dev Guide in the topic, "Static Resources".

 

If you are asking can a CSS in one static resource refer to an image in another static resource, I think the answer is no.

 

This was selected as the best answer
Scott.MScott.M

Thanks!

 

That answers my question it's probably better to upload it all as a zip anyway :) 

 

 

Susana NTSSusana NTS

And what if my static resource is a package containing a css file and a folder called 'img' with all the images needed by the css?

 

I've tried to reference the images in the css as the Dev Guide says but it doesn't work

example given:

 

resource called  style_resources is a .zip

 

in styles.css

table { background-image: img/testimage.gif }

 

in visualforce

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

 

Not working AT ALL!  :smileysad:

Siddhesh KabeSiddhesh Kabe

Yes even i tried it that way...but aparently it doesn't work that way. I think it must be the problem with the Zip compression tool.

But the thing works fine if you have no package.