Problem getting image on <p:commandButton>

[BigBwana]

This seems like a simple thing, but I'm having a problem getting it to work.

I'm trying to display an image on top of a command button so just the image is visible.
Following the users guide, I have the following button definition in my page.

<p:commandButton style="top: 300px; left: 530px; position: absolute;" icon="loginBtn" action="#{sessionBean1.processLogin}" />

In my css file I have:

Code: Select all

.loginBtn {
    background-image: url('../Images/bone.gif') !important;
}

I suspect the url is correct because if I add the following to my css file, I get the image as a page background.

Code: Select all

body {
        background-image: url('../Images/bone.gif');
}

Ther problem is that I am not seeing the image on the button.
What am I doing wrong?

Thanks

[BigBwana]

I guess the solution is to use <h:commandButton>.
That works just fine.

[leventgny]

Override all background properties. Because default theming applies some background positioning etc. Like;

Code: Select all

.ui-icon.loginBtn {
    background-image: url('../Images/bone.gif');
    background-position: 0 0;
}

[dasago]

Does this work? When i try the example it doesn't work:

Code: Select all

<p:commandButton icon="loginBtn"/>

Code: Select all

.ui-icon.loginBtn {
	background-image: url('../images/icons/preview.png') !important;
	background-position: 0 0 !important;
}

[ssdingenieria]

Hi,

I have the next button:

<p:commandButton value="&nbsp;Cancel" update=":frmList" oncomplete="dlgNew.hide()" actionListener="#{statesBean.preInsert(actionEvent)}" icon="ui-icon-delete" title="Cancel" />

And the next style works for me:

.ui-icon.ui-icon-delete{
background-image:url(../img/delete.png)!important;
}

If you use firebug you can see the three last classes, in my case appear some like:
<span class="ui-button-icon-left ui-icon ui-c ui-icon-save"></span>

And chose the last three of these, I chose the first and the third to declare the style

Bye.