I have a block that references a background image, that is in my static resources. The example I am going by is :

background: url(../img/myimage.png) no-repeat;

but i get the following error:

GET https://org99.eu5.visual.force.com/img/a06.png 404 (Not Found)

What is the correct way to reference that resource in the block?

2 Answers 2


Use URLFOR. Here is a good resource to get you started.



{!URLFOR($Resource.img, 'myimage')}
  • Follow up question: If i store a06.png file as a static resource with the name a06, then I no longer have to specify the png extension, correct? For instance, I reference it as : {!URLFOR($Resource.a06)}
    – KickinMhl
    Jun 12, 2015 at 15:59
  • @KickinMhl Yep you got it. Just the file name.
    – Adrian Larson
    Jun 12, 2015 at 16:00

You can use relative paths in files in static resource archives to refer to other content within the archive. For example, in your CSS file, named styles.css, you have the following style:

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

When you use that CSS in a Visualforce page, you need to make sure the CSS file can find the image. To do that, create an archive (such as a zip file) that includes styles.css and img/testimage.gif. Make sure that the path structure is preserved in the archive. Then upload the archive file as a static resource named “style_resources”. Then, in your page, add the following component:

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

For more details refer to this link. Hope this will help.

  • The question explicitly asks about a <style/> block meaning the CSS is embedded in the Visualforce page.
    – Keith C
    Jun 12, 2015 at 8:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.