Can't loading CSS images in JSF

Can't loading CSS images in JSF

Description : In my JSF application, i am setting the menu background
images through CSS property.
i configured the file structure as follows
This is my CSS code
Style.css
#menu
{
height:35px;
width:950px;
background:url(images/default.gif);
/*background:url(#{resource['images:default.gif']});
background:url(#{resource['images/default.gif']});
*/
}
and this CSS file is under /resources/css directory, and i am importing
the css file in xhtml page using
<h:head>
<h:outputStylesheet library="css" name="style.css"></h:outputStylesheet>
</h:head>
There is no problem in importing CSS file
Problem description
I mapped the FacesServlet on *.xhtml:
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.xhtml</url-pattern>
</servlet-mapping>
If i run the home page , the menu images which is configured in css is not
loading
When i remove the FacesServlet mapped configuration on *.xhtml the images
are is loading perfectly
i have tried
I have tried the following methods in css file to load an image
background:url(images/default.gif);
background:url(#{resource['images:default.gif']});
background:url(#{resource['images/default.gif']});
Added Resource handler in faces-config.xml
<application>
<resource-handler>org.omnifaces.resourcehandler.UnmappedResourceHandler</resource-handler>
But i couldn't find the solution yet...!!!