CODEWITHSUNDEEP
cssjsf-2background-image
Ashish Agarwal
Ashish Agarwal

Reputation: 6283

How to add background image and icon to a JSF button?

I am using JSF 2.0
I am able to add Background image to the JSF button but am not able to add icon to the button.

My Requirement is:- JSF button with Background image and a Icon

Following code am using to add background.

     <!-- Discard button-->
        
<h:commandButton action="discard"  style="background-image: url('..\\Images\\leftMenuActiveBg.png');width: 150px;height: 30px;color: white;border-color: white;font-size: 15px; "  value="#{message.discard}">
<rich:componentControl target="popup" operation="show" />
 </h:commandButton>

Can somebody help me in adding a icon to the button too please. enter image description here
I am updating a image for better Explainanation as what I want to achieve and I what I have achieved till now with above code.

Upvotes: 0

Views: 2511

Answers (1)

BalusC
BalusC

Reputation: 1109874

So you want a button with two background images? That's not possible on a single HTML element. The <h:commandButton> generates an single HTML <input type="submit"> element, while you basically need a <button type="submit" class="background"><span class="icon"> instead. You'd need to create a custom component which generates exactly that HTML, or to adopt a 3rd party component librarty which has such a component in its set, such as PrimeFaces. See also the <p:commandButton> showcase.

Upvotes: 1

Related Questions