I have a static component where the content is loaded dynamically as html. The lightning component provides some styles to present that content. I would like to provide icons, images that are defined as 'Static Resources' to that content from css. Like if there is a div with class 'warningDiv' then the css can be,

.THIS .warningDiv {
  background-image: url('warning.png')

I tried adding the image as static resource and using the name of static resource like background-image: url('warning.png') and as well as using the $Resource expression background-image: url('!$Resource.resourcename') but both don't work.

Then I tried adding the image in an archive, load that in component using ltng:require but as styles and then tried to the image in css. That didn't work as well,

<ltng:require styles="/resource/my_resources"
              afterScriptsLoaded="{!c.init}" />

.THIS .warningDiv 
        background-image: url('./warning.png');

but maybe I am doing it wrong.

I know one of the work around is to modify the content and have but I would want to avoid that as it would mean modifying lot of content.

Is there a way to refer static resource images in css for lightning component?

  • 5
    /resource/resourcename/imagename.ext should work. – sfdcfox Oct 9 '16 at 5:35
  • I had already tried background-image: url("/resource/my_resources/warning.png") but that didn't work as well :-( – Bhupendra Joshi Oct 9 '16 at 5:44
  • Well, I gave it an honest try. I'm still learning Lightning myself... hopefully someone has an answer, and we'll all learn something new. – sfdcfox Oct 9 '16 at 5:49
  • Shouldn't you be using URLfor with the resource attempt? – Eric Oct 9 '16 at 7:07
  • @Eric I understood that with for visualforce pages and not for lightning. I tried that doesn't work either :-( – Bhupendra Joshi Oct 9 '16 at 7:46

you can certainly refer the static resource contents in your app/component.css using /resource/resource_name format.

Here's a sample app which I tried in my org to set div's background-image property by referring the slds loading image in the static resource.


<aura:application access="GLOBAL">
     <div class="loading" style="height: 166px;width: 189px;">


.THIS .loading{
    background-image: url(/resource/loading) 


enter image description here

| improve this answer | |
  • Strange that I tried it earlier it didn't work but now it seems to work. maybe the namespace I specified was not correct – Bhupendra Joshi Oct 13 '16 at 7:28

I have tried the answer by Praveen and when viewing the CSS in a browsers developer mode the css url() appears exactly as typed, ie. it's not converting the path '/resource/loading' to the static resource URL. Strangely this answer here on Stack Exchange seems to be the only discussion about this.

The way I have achieved this today is by reverse engineering the static resources that the community template itself uses as provided by Salesforce (note this will obviously only work in the context of sites and communities).

The static resource is called PFResources and contains a folder structure like:

  • img
  • icons
  • css

Inside 'img' are the images I want to use for the footer background. So the class definition in the Lightning component CSS is:

.THIS .class {
      background-image : url('/sfsites/c/resource/PFResources/img/partnerships.jpg');

This is currently working in both the community builder, preview and while logged into the site as a user.

Update: This is a documented solution for using custom fonts in a community so will work as a long term solution. The following article describes accessing static resources in this way although doesn't explicitly make reference to image files; suggesting this isn't just a 'hack' but is intended behavior. Use Custom Fonts in your community

| improve this answer | |
  • 1
    This is the only solution that worked for me. Perhaps the other solutions have been deprecated? – captain_jim1 Mar 10 '19 at 8:08
  • Same here. I am building a Community Layout Component. Using /resource/my_resource to reference a png background image in my component's CSS file created an URL that lead to a page "Server is down for maintenance". So if I have a static resource named my_resource, I can reference it in my stylesheet like so: /customers/sfsites/c/resource/my_resource. – Michael Jan 23 at 16:09
  • 1
    +1, thanks for sharing solution for Communities – Wookie88 Mar 16 at 15:32

for the selected answer, the url needs to be in quotes:

.THIS .loading{
    background-image: url('/resource/loading') 

thanks Hutchenstein for the tip for the correct path for rendering within a community. this is just what I was missing for one my components.

| improve this answer | |

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.