+ Start a Discussion

url() references in CSS files

I am helping a company migrate from IIS to Salesforce using apex.  One thing I just recently came across was their large global.css contains tons of url() calls.  For example:


#logo {
    display block;

    background:url("/images/foo/bar/.png") no-repeat scroll

    /* ... */



There are literally hundreds of asset references like this - even for fonts:


@font-face {
    font-family: 'CustomFont;
    src: url('CustomFont.eot');
    src: local('Custom Font'), local('CustomFont'), url('CustomFont.woff') format('woff'), url('DroidSans.ttf') format('truetype'), url('CustomFont.svg#DroidSans') format('svg');


Does URLFOR work within CSS files?  I suspect not.  If not, for elements which use url() the only thing I can think of is to find each of the million elements and hard code that CSS attribute.  Is there a better way?  Also, what would be a solution for non-element styles such as the one above?


Any advice GREATLY appreciated here!



Best Answer chosen by Admin (Salesforce Developers) 

The way to handle this is to create a static resource that includes both the CSS and the referenced images etc.  I've never tried this for fonts so I don't know if that will fly.


There's more information in this wiki article: