Apex Code Development You need to sign in to do that
Don't have an account?
javierjies 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!!!
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:
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
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:
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....
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
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...
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
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>