How to show the entire background-image in <p:commandLink>?

Question

I have a <p:commandLink> wherein I want to show a picture as CSS backgound image:

.button{

    background-image: url(http://www.lefinnois.net/aqua/aqua1.jpg);

    background-size: 50px;    

}

<p:commandLink update="media" value="Kaydet"

    action="#{productView.save}" styleClass="button">

</p:commandLink>

But I need the command link to have the same width and height as the background image. If I add the following property to the CSS

background-size: 50px;

then I can see a small portion of the image. If I don't add this, I cannot see the image.

If I try to add this to the CSS

width: 100px;

height: 50px;

then nothing changes.

JavaScript questions and answers, JavaScript questions pdf, JavaScript question bank, JavaScript questions and answers pdf, mcq on JavaScript pdf, JavaScript questions and solutions, JavaScript mcq Test , Interview JavaScript questions, JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)

Answer 1

Tag <a/> generated by p:commandLink is an inline html element and as such has cannot have its size set. You can override it by setting display css attribute to inline-block - or use p:commandButton instead.