Sign Up ›

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

image from css

Hello everyone!!

 

I ve started my visualforce page whit this in the beginning:

<apex:page showHeader="false">
<apex:styleSheet value="{!$Resource.cssFile}"/>
 

 

In Static Resources I have a CSS called cssFile and everything works fine but;

 

In the CSS I have this:

 

#footer {
    width:820px;
    height:80px;
    text-align:center;
    margin:0 auto;
    padding:0;

    background: #EFEFEF url(footer.jpg?z=55297) no-repeat 50% 0 ;
}

 

 

 

obviously  background: #EFEFEF url(footer.jpg?z=55297) no-repeat 50% 0; doesn't work

 

 

so, I have uploaded footer.jpg as FOOTER in Static Resources, but I don't know how can I call Resource.FOOTER from the CSS

 

 

Any Idea?!?!?!?

 

 

Thanks in advance!!!

Best Answer chosen by Admin (Salesforce Developers) 
javierjiesjavierjies

ok, I've found this in http://wiki.developerforce.com/index.php/Delivering_Static_Resources_with_Visualforce

 

In addition to this being a convenient way to upload a bunch of files, this also enables an important scenario: referencing a static resource from another static resource. Because static resources are inherently static, they cannot contain expressions, so how would a CSS resource reference an image resource? Don't ever be tempted to hardcode it. The answer is that they both need to be part of the same resource bundle (ZIP file). If the red.css file needed to reference the header.jpg file it could simply do so like this: 

background-image: url(images/nav/header.jpg)

This works because the URL for the CSS file /resource/timestamp/stylesheet_red acts as the base URL and references to other files from within that CSS are treated as being relative from that location. So the above reference evaluates to /resource/timestamp/stylesheet_red/images/nav/header.jpg which is the correct URL of the header.jpg file.

 

 

 

Hope It helps anyone....

 

All Answers

javierjiesjavierjies

ok, I've found this in http://wiki.developerforce.com/index.php/Delivering_Static_Resources_with_Visualforce

 

In addition to this being a convenient way to upload a bunch of files, this also enables an important scenario: referencing a static resource from another static resource. Because static resources are inherently static, they cannot contain expressions, so how would a CSS resource reference an image resource? Don't ever be tempted to hardcode it. The answer is that they both need to be part of the same resource bundle (ZIP file). If the red.css file needed to reference the header.jpg file it could simply do so like this: 

background-image: url(images/nav/header.jpg)

This works because the URL for the CSS file /resource/timestamp/stylesheet_red acts as the base URL and references to other files from within that CSS are treated as being relative from that location. So the above reference evaluates to /resource/timestamp/stylesheet_red/images/nav/header.jpg which is the correct URL of the header.jpg file.

 

 

 

Hope It helps anyone....

 

This was selected as the best answer
wesnoltewesnolte

Hey

 

Unfortunately you can't unless you do it as suggested here.

 

It should work the first way though, and the issue is almost definitely something small. A few things to check:

 

1. Have you tried referring to you image just as 'footer.jpg' ?

2. Are your CSS and image at the same level in the directory tree? i.e. within your zip file are they both in the root dir?

 

 

Cheers,
Wes 

 
javierjiesjavierjies

thanks for your response

 

In Static Resources I have: 

 

cssIP     text/css 
estilos     application/zip 
footer     image/jpeg

 

In "estilos" I have cssIP and footer without any folder, I mean, just two files...

 

I've tried:  <apex:styleSheet value="{!URLFOR(!$Resource.estilos,'style.css')}"/>

 

but it doesn't work

 

I've tried: <apex:styleSheet value="{!$Resource.cssIP}"/> 

 

but it doesn't work

 

I've tried: background: #EFEFEF url({!URLFOR($Resource.estilos,'footer.jpg')}) no-repeat 50% 0 ;

 

In the CSS...but it doesn't work

 

 

Or It's really complex, or I'm really stupid cause I've been more than four hours trying to use CSS and Images in Salesforce Sites and I have nothing yet...

 

 

Well, that's not true, because if I have <apex:styleSheet value="{!$Resource.cssIP}"/>  and I click Preview It work, but if I tip the URL in another firefox window......It doesn't work...:smileysad:

 

 

Message Edited by javierjies on 06-23-2009 09:19 AM
wesnoltewesnolte

Sorry I'm having trouble understanding. Do you have 1 static resource? Let me give you an example

 

I have one ZIP file and I put everythign in there. I have 2 files

 

style.css

image.jpg

 

both of these files are in the same directory and I zip them into the one ZIP file. I then upload this ZIP file as a static resource called styles.

 

I then use this stylesheet liek this

 

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

>

 

In my stylesheet I have a style that uses the image like this

 

.myClass {

 

   background-image: url(image.jpg);

}

 

It's a very difficult thing to get right initially. That's why I suggest using components as stylesheets.

 

Cheers,

Wes

 
David Cheung 14David Cheung 14
In case someone is still looking for answer to this one.
SLDS_CSS is the name of the static resource of a zipped file.
"assets/icons/utility/down_60.png" is the path to the image within the zip folder structure.

<style>
 select {
     -webkit-appearance: none;    
     -moz-appearance: none;      
     border:1px solid #eaeaea;
     color: #fff;
     -webkit-border-radius: 5px;
     border-radius: 5px;
     padding: 5px;
     cursor: pointer;
     background: #ffffff url({!URLFOR($Resource.SLDS_CSS, 'assets/icons/utility/down_60.png')}) no-repeat right center;
     background-size: 40px 37px;
   }    
</style>