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.

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.