image cannot be seen on p:commandButton

Question

i want to display an image on p:commandButton , i have tried many ways but unable to show the image on the button.Below is the code i have included: css code:

.ui-icon-myCancel{
    background-image: url("#{resources['images/cancel.jpg']}") !important;
}


 <p:commandButton icon="ui-icon-myCancel" action="#{cancelMB.cancelList}" update="dataInfo" ajax="true"/>

I have image under WebContent\resources\images\cancel.jpg

The other way i tried modifying the css code as below but still no luck:

.ui-icon-myCancel{
       background-image: url(resources/images/cancel.jpg) no-repeat top left !important;
}

other way:

.ui-icon-myCancel{
       background-image: url(resources/images/cancel.jpg)
}

Please suggest , where iam going wrong.

Answer 1

An alternative solution is to abandon CSS use here, and rely on a extra nested tag "graphicImage" inside not a commandButton, but a commandLink instead :

<p:commandLink action="#{cancelMB.cancelList}" update="dataInfo" ajax="true" >
     <h:graphicImage name="images/cancel.jpg" title="Cancel" />
</p:commandLink>