how do we access the image files from static resource in css?

Question

I am trying to display images from a static resource in a css property.

.PDF
{
    width:50px;
    height:50px;
    background-image: url("{!URLFOR($Resource.FileTypes, 'png/pdf.png')}"; 
}

What i am trying to do is to display an image instead of displaying the filetypes in contentversion object. So what i thought of was to have a div with a class of the filetype

<div class="{!cv.FileType}"></div>

The html generated is all coming correct but the image does not appear. Further checking on firebug, the background-image tag in the css is not displayed at all. Not sure if its an issue with how i am using the static resource. The zip file has a folder called png and it has the images of all the file types.

Any ideas why the image is not getting displayed. The div gets displayed with the height and width as 50px

Answer 1

For me works the following code:

background-image: url({!URLFOR($Resource.MyResource,'images/')}myimage.png);

Answer 2

Usually I put everything (css + images) in a single zipped folder. This way you can access images using relative URL.

.PDF
{
    width:50px;
    height:50px;
    background-image: url("png/pdf.png"; 
}