Some problem to show a background immage in my portlet

[Andrea Nobili, modifié il y a 13 années.]

Hello,
I am new in LifeRay and I have some problem to put a background immage in my portlet.

I am developing a LifeRay portlet that use IceFaces to show its contents.

Basically I have 2 buttons that should have a background image (so as to be clickable icons) but those buttons, even if fully functional, do not display in any way the background image so as to be invisible to the user !!!

The code in my XHTML page representing the view of my portlet is as follows:

<f:view xmlns:f="http://java.sun.com/jsf/core" xmlns:ice="http://www.icesoft.com/icefaces/component" xmlns:liferay-faces="http://liferay.com/tld/faces">
	<ice:portlet>
	
			<div>
        <ice:panelgroup styleclass="componentBox" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:ice="http://www.icesoft.com/icefaces/component">
    
<ice:form>
    <ice:panelgroup styleclass="exampleBox dataScrollingContainer" style="clear: left;">
    
    	<ice:datatable value="#{popolaTabella.elenco}" var="portafoglio" id="tab">
    		
    		<ice:column rendered="false">
    				<ice:rowselector value="#{portafoglio.selected}" selectionListener="#{popolaTabella.rowSelector}" id="roselector" />    			
    		</ice:column>
    		
    		<ice:column>
    				<f:facet name="header"><ice:outputtext value="Tipo Elemento:" /></f:facet>
    				<ice:outputtext value="#{portafoglio.tipoElemento}" />
  			</ice:column>
  			
  			<ice:column>
    				<f:facet name="header"><ice:outputtext value="Cod Rapporto:" /></f:facet>
    				<ice:outputtext id="OUT" value="#{portafoglio.codiceRapporto}">
    					<f:facet name="nameDecoder">rapporto.properties</f:facet>
    					<f:converter converterid="rapportoConverter">
    				</f:converter>
    				</ice:outputtext>
  			</ice:column>
  			
  			<ice:column>
    				<f:facet name="header"><ice:outputtext value="Num Polizza:" /></f:facet>
    				<ice:outputtext value="#{portafoglio.numeroPolizza}" />
  			</ice:column>
    		
    		<ice:column>
    				<f:facet name="header"><ice:outputtext value="Descrizione Prodotto:" /></f:facet>
    				<ice:outputtext value="#{portafoglio.descrizioneProdotto}" />
  			</ice:column>
    	
    		<ice:column>
    				<f:facet name="header"><ice:outputtext value="Descrizione Oggetto:" /></f:facet>
    				<ice:outputtext value="#{portafoglio.descrizioneOggetto}" />
  			</ice:column>
  			
  			<ice:column>
    				<f:facet name="header"><ice:outputtext value="Cod Stato:" /></f:facet>
    				<ice:outputtext value="#{portafoglio.codiceStato}" />
  			</ice:column>
  			
  			<ice:column>
    				<f:facet name="header"><ice:outputtext value="Data Effetto:" /></f:facet>
    				<ice:outputtext value="#{portafoglio.dataEffetto}">
    					<f:convertdatetime datestyle="default"></f:convertdatetime>
    				</ice:outputtext>
  			</ice:column>
  			
  			<ice:column>
    				<f:facet name="header"><ice:outputtext value="Data Scadenza:" /></f:facet>
    				<ice:outputtext value="#{portafoglio.dataScadenza}">
    					<f:convertdatetime datestyle="default"></f:convertdatetime>
    				</ice:outputtext>
  			</ice:column>
  			
  			<ice:column>
    				<f:facet name="header"><ice:outputtext value="Premio Lordo Annuo:" /></f:facet>
    				<ice:outputtext value="#{portafoglio.premioLordoAnnuo}">
    					<f:convertnumber groupingused="true" maxfractiondigits="2" minfractiondigits="2"></f:convertnumber>
    				</ice:outputtext>
  			</ice:column>
  			
  			<ice:column>
    				<f:facet name="header"><ice:outputtext value="Azioni:" /></f:facet>
    					
    					<ice:panelgroup styleclass="returnItemButton" rendered="#{portafoglio.selected}">
	                		<ice:commandlink id="DDRtn" actionlistener="#{popolaTabella.azione1Listener}" value="AZIONE 1">
	                        	<f:param name="id" value="#{portafoglio.numeroPolizza}" />
	                
	                    	
	                		</ice:commandlink>
                		</ice:panelgroup>
                		
                		<ice:panelgroup styleclass="returnItemButton" rendered="#{portafoglio.selected}">
	                		<ice:commandlink id="DDRtn2" actionlistener="#{popolaTabella.azione2Listener}" value="AZIONE 2">
	                    	<f:param name="id" value="#{portafoglio.numeroPolizza}" />
	                		</ice:commandlink>
                		</ice:panelgroup>
        
  			</ice:column>
    	
    	</ice:datatable>

    </ice:panelgroup>
    </ice:form>
    
    
</ice:panelgroup>
</div>

	<div>
        <ice:panelgroup styleclass="exampleBox dataScrollingContainer" style="clear: left;">
        <ice:form rendered="#{popolaTabella.portafoglioIsSelected}">
        	
	         <ice:commandbutton styleClass="bottone1" actionListener="#{popolaTabella.azione1Listener}" style="background: url(./img/Blue-block-icon.png); border-style: none; 
	         						   width: 48px; height: 48px;" />
	         					   
	          <ice:commandbutton styleClass="bottone2" actionListener="#{popolaTabella.azione2Listener}" style="background: url(./img/Green-block-icon.png); border-style: none; 
	         						   width: 48px; height: 48px;" />

	         
         </ice:form>
         </ice:panelgroup>
         </div>
      
         				
	</ice:portlet>
</f:view>

In particular, the problem is this piece of code that manage the two buttons to display:

 <div>
        <ice:panelgroup styleclass="exampleBox dataScrollingContainer" style="clear: left;">
        <ice:form rendered="#{popolaTabella.portafoglioIsSelected}">
        	
	         <ice:commandbutton styleClass="bottone1" actionListener="#{popolaTabella.azione1Listener}" style="background: url(./img/Blue-block-icon.png); border-style: none; 
	         						   width: 48px; height: 48px;" />
	         					   
	          <ice:commandbutton styleClass="bottone2" actionListener="#{popolaTabella.azione2Listener}" style="background: url(./img/Green-block-icon.png); border-style: none; 
	         						   width: 48px; height: 48px;" />

	         
         </ice:form>
         </ice:panelgroup>
         </div>

In these I have added the style attribute that specifies the style of buttons, specifying the size, the path (in my portlet), andviewing as a background image.

The strange thing is that in the separated IceFaces project (not in the portlet) then backgrounds images of the buttons are displayed correctly

Why can not I set up Liferay style of these buttons?
This can be caused by a problem of path for png files?

I hope that someone can help me

Thanks
Andrea