how do we access the image files from static resource in css?
For me works the following code:
background-image: url({!URLFOR($Resource.MyResource,'images/')}myimage.png);
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";
}