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.
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.
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 }
<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
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 }
<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.
Thanks!
That answers my question it's probably better to upload it all as a zip anyway :)
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:
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.