function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
AnjaneyluAnjaneylu 

Calling image file in CSS from Static Resource zipped folder..

Hi Experts,

Here i am facing the issue in calling the file from zipped folder which is in the static resource..
and with  that image i want to use in the background for page..

Here my static resource file name is Static
 and Zipped file name is Book.zip
 and files in this Zipped folder is images and two files are there..
pen.jpg  and pencil.jpg.
here i tried to call these files like ..
And image is not displaying here in the background..

  
body
         {
               background-image: "{!URLFOR($Resource.static, 'images/pen.jpg')}";     
         }

So please suggest me..
Thanks in Advance,
Anji K..

 
Mehul MakwanaMehul Makwana
You can do that by Includind CSS File, Follow the Steps

1. Place the background image(say bg.png) in a folder
2. Create a CSS file customCss.css with below code 
<style type="text/css">
       body { background-image: url("images/bg.png") }  
</style>
3. Now Zip up the image folder and the CSS file together as imageStyle.zip
4. Now goto Your Name | Setup | Develop | Static Resources | New | Name as MyStyles| Upload imageStyle.zip | Save
5. Now, Modify your visualforce page, add the below line 
<apex:stylesheet value="{!URLFOR($Resource.MyStyles, 'customCss.css')}"/>

Also, modify your apex:page tag as below 
<apex:page standardStylesheets="false">
Hope this helps. Let me know
AnjaneyluAnjaneylu
Hi Mehul,
Thanks for your reply..
Here i need to call the imagae  file from the Zipped folder and In this Zipped folder we have  5 files and i have to use particular file in the background image.  and i want to implememt that  image in the background. and it has to be replace.. 
And i have to refer that image in the css code only..

So kindly suggest me , how to call particular single file from the zipped folder..
thanks in Advance,
Anji..
Mehul MakwanaMehul Makwana
Hi Anjireddy,

Kindly follow below syntax for accesing single image,
Make Sure that you have  Added static resources to page's <head>
  
<apex:image alt="eye" title="eye" url="{!URLFOR($Resource.jQueryMobile, 'images/icons-png/eye-black.png')}"/>
If your problem still not resolve you can refer below Link.

https://developer.salesforce.com/trailhead/en/visualforce_fundamentals/visualforce_static_resources

If it resolve your problem, let me know.
AnjaneyluAnjaneylu
Hi Mehul,
Apex tag can not be used in the css properties.. Am i  right?

I want to ic=nclude that inside the css properties of the page only..

Thanks in advance,
Anji
Mehul MakwanaMehul Makwana
Can you bit explain your question!

If you want to write CSS inside Apex Page the ou can Include it in side <Style> Tag

For EX: 
<style>
    body
    {
      padding: 30px;
      background-color: #fcfcfc;  
    }
</style>

 
AnjaneyluAnjaneylu
I have  one texture image which i want to place this in the background of the image..
But it is inside the zipped folder which is placed inside the static resource. in this folder i have some css properties and some more image files.
So my requirement is by calling this file from static resource ( i'm going to develop the custom component which is going to be used for many of the pages..) so for that i want to call that file and place in the style class.. 

But i m not able to properly call that image from static resource in  style class..
So can you help me regarding this,

Thanks and regards,
Anji 
Mehul MakwanaMehul Makwana
Hi Anjireddy,

I have write another simple code for you, this will definately works.

Step 1: Create Static Resource and name it background.
Step 2: upload any background image and name it bg.jpg / bg.png and Put Cache Control as 'PUBLIC'

Now past below apex code at top of your page: 
<apex:page showHeader="false" sidebar="false" >
    <body style="background-image:url('{!$Resource.background}');"></body>
</apex:page>

Click on Preview, and see it works,

Let me know, If it resolve your problem.
Mehul MakwanaMehul Makwana
And for more styling use below code 
  
<body style="background-image:url('{!$Resource.background}');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;"></body>
Let me know, If it works for you.
 
Eric Wilson 23Eric Wilson 23
Oh wow - it's takien a long time for this answer: Please show some love, thumbs up this one, this worked for me. 
.mainNav{
background-image: url('{!URLFOR($Resource.StaticResourceName, 'ZippedFolderName/images/hdr-bdr.png')}');

}

 
Michael Gutierrez 17Michael Gutierrez 17
In a lightning compmonent it's simply :

content: url('../resource/<resourceName>/<img>.png');
Vishal gadhaveVishal gadhave
You can use below on to use static resource in CSS directly. this worked for me,
html
<div class="app"></div>
css:

.app {
background-image : url(/sfsites/c/resource/YOUR_FILENAME_WITHOUT_Extension);
}