I went through a lot of threads of people explaining how to link to a static resource image in your CSS. My code looks fine to me, yet it doesn't work.

I have put the css file in a folder together with the images folder(which holds the manager_headshot.jpg).

Here's how I reference my css file in my visual force page:

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

And here's how I reference the image in my css file:

background-image: url("images/manager_headshot.jpg");
  • I think you'll have to inline it so you can still use merge fields, though you can generate it statically. Not sure about cache busting.
    – Adrian Larson
    Feb 19 '16 at 22:45
  • @AdrianLarson what do you mean by inlining it? I am still very new to Visual Force. Can you elaborate your whole answer. What are you suggesting for me to try?
    – Arthlete
    Feb 19 '16 at 23:09
  • Inline CSS rules. You can only use merge fields on the page so maybe you can define this kind of style there...
    – Adrian Larson
    Feb 19 '16 at 23:11
  • 2
    That's weird! Similar reference to image has worked for me in the past. Can you confirm image type and folder structure in static resource? Also, you can give it a shot: background-image: url("../{ResourceName}/images/manager_headshot.jpg"); Feb 19 '16 at 23:13
  • 1
    Ahhh I have encountered this problem earlier. In my case the reference to static resource was not updated even after refreshing the page or clearing the cache. If I recall correctly, the static resource have a number generated each time it is updated (based on timestamp). I had to manually update the timestamp, and later it got resolved (yes, out of nowhere and with no clue). All I can say is that I have been in your shoes, and I am hoping that this bug would be fixed soon with the upcoming releases. #fingerscrossed Feb 20 '16 at 21:33

Static resources when created/updated have an id generated based on timestamp. At times, the static resources refer to the older instance of themselves and any updates made in the static resource are not reflected in VF page. I have encountered this problem earlier. In my case, when timestamp reference was manually updated in the reference of static resource, the code was then referring to the recent version of static resource.

UPDATE: To confirm whether recent updates for a static resource exist in visualforce page, do right-click and Inspect Element. Under Sources tab, locate static resource in question and expand it to see the changes.

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.