Changing JSF prefix to suffix mapping forces me to reapply the mapping on CSS background images

I've been using prefix mapping for years and decided to switch to suffix mapping, just to get rid of the /faces in the url really. I just wanted to check I'm going in the right direction before I dig myself a hole as there are a few unexpected things going on. I changed from this:

<servlet-mapping>
    <servlet-name>FacesServlet</servlet-name>
    <url-pattern>/faces/*</url-pattern>
</servlet-mapping>

to this:

<servlet-mapping>
    <servlet-name>FacesServlet</servlet-name>
    <url-pattern>*.xhtml</url-pattern>
</servlet-mapping>

And then I see that everything going through FacesServlet has .xhtml appended to it, so that the browser is requesting background.png.xhtml files, style.css.xhtml file - is this right? It is called suffix mapping I suppose, but it looks a bit untidy to me and I'm trying to convince myself it's the way to go.

In my CSS files where an URI is referenced I also have to append .xhtml:

background-image: url(images/background.png.xhtml);

Then I saw a post from BalusC that gives a solution to prevent the download of resources without going via FacesServlet:

<security-constraint>
    <display-name>Restrict raw XHTML docs</display-name>
    <web-resource-collection>
        <web-resource-name>XHTML</web-resource-name>
        <url-pattern>*.xhtml</url-pattern>
    </web-resource-collection>
    <auth-constraint/>
</security-constraint>

When I add this then only real .xhtml files load on the page, all other resources (despite having .xhtml appended) do not d