How to implement JSF button with image and button label - css

Question

I want to implement JSF button with image and custom label. I tested this code:
<h:commandButton id="savesettings" styleClass="avesettings" value=" Save Settings " action="#{GeneralController.updateDBSettings}" rendered="true" update="growl">
<f:ajax render="#form" execute="#form"></f:ajax>
</h:commandButton>
.avesettings {
background-image: url('../images/small.png');
}
This is the result:
I also tested this second code:
<h:commandButton id="savesettings" image="resources/images/first.png" value=" Save Settings " action="#{GeneralController.updateDBSettings}" rendered="true" update="growl">
<f:ajax render="#form" execute="#form"></f:ajax>
</h:commandButton>
I get this result with no label:
Can you help me to create JSF button with background image and custom label defined as button attribute?

Answer 1

The first method that you have used styleClass="avesettings" i.e., using CSS style is the only possible way to do it since if you specify the image attribute, the input element will become an image.
See also documentation
So your best bet would be to use advanced styling techniques for the buttons, refer to these articles for that:
http://coding.smashingmagazine.com/2009/11/18/designing-css-buttons-techniques-and-resources/
http://www.tyssendesign.com.au/articles/css/styling-form-buttons/

Answer 2

The following JSF/CSS should solve your problem:
JSF (the same as in your first example):
<h:commandButton id="savesettings" styleClass="avesettings" value="Save Settings" action="#{GeneralController.updateDBSettings}" rendered="true" update="growl">
<f:ajax render="#form" execute="#form"></f:ajax>
</h:commandButton>
CSS (adapted):
.avesettings {
background: url('../images/small.png') no-repeat;
cursor: pointer;
width: 126px;
height: 41px;
border: none;
}
Width and height of the css must be the width and height of your image. I also have the css in an external css file, not direct in the JSF template.

Answer 3

Did you try the "image" attribute of he commandButton tag?

Answer 4

One way to implement this is to load the image as jsf resource in your style sheet:
<style type="text/css">
.imageButton
{
background-image:url(#{resource['images/button.png']});
}
</style>
Then set the relevant commandButton styleClass in the xhtml:
<h:commandButton value="Submit" styleClass="imageButton" action="#{...}"/>
Put the file button.png under your resources folder i.e. resources/images/button.png and make sure your resources folder is located next to your WEB-INF folder
Or if you want the image to display as an icon next to the text in the commandButton then you can play around with css a little:
.imageButton
{
padding: ...
border: ...
color: ...
background: [<'background-color'> || <'background-image'> || <'background-repeat'> || <'background-attachment'> || <'background-position'>]
}