Как ссылаться на ресурс изображения JSF как URL-адрес фонового изображения CSS

Я часто меняю изображения кнопок с помощью атрибута image, но кто-то сказал мне, что это хорошая практика делать это с использованием .css Я пробовал, но не могу, что делаю не так? Вот что я сделал:

1-Ресурсы моего проекта хранятся следующим образом:

2-Так я создал style.css для доступа к изображению

.c2 {
    background: url(/resources/images/smiley.jpg);  
}

3-Вот как я получаю доступ к css из тела моей страницы (я уверен, что это правильно, потому что другие классы в том же документе работают в других тегах на этой странице)

<h:outputStylesheet library="css" name="style.css"  />

4-Вот как создать образец commandButton, который использует соответствующий класс css

<h:commandButton styleClass="c2"/>

I Думаю, проблема в .css, я попробовал несколько комбинаций, но ни одна из них не сработала:

background-image: url(/resources/images/smiley.jpg);    
background: url(resources/images/smiley.jpg);   
background: url(smiley.jpg);    
background: url(../smiley.jpg); 

Где ошибка?

update Мне удалось заставить его работать с помощью следующего кода:

.c2 {   
     background: url("#{resource['images:smiley.jpg']}");               
    }

Обратите внимание на разницу, когда я использую css (справа) и когда я использую атрибут изображения (слева)

Как я могу решить эту проблему, чтобы отображалось удерживаемое изображение?