title: background image in layoutunit
body: <p>is it possible to display a background image inside a layoutunit pane? I've tried the following with no success, the pane contents remain a white background:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
      &lt;html xmlns="http://www.w3.org/1999/xhtml"
         xmlns:f="http://java.sun.com/jsf/core"      
         xmlns:h="http://java.sun.com/jsf/html"
         xmlns:p="http://primefaces.org/ui" &gt;
  &lt;f:view contentType="text/html"&gt;
      &lt;h:head&gt;
          &lt;link rel="stylesheet" type="text/css" href="css/bg.css" /&gt;
          &lt;style type="text/css"&gt;
              .ui-widget{font-size:90% !important;}
              .ui-layout-unit-content{background-image:url('images/bluebackgroundsmall.jpg');}
          &lt;/style&gt;
      &lt;/h:head&gt;            
  &lt;h:body&gt;
   &lt;p:layout fullPage="true"&gt;  
  
  &lt;p:layoutUnit position="north" size="100" header="Top" resizable="true" closable="true" collapsible="true"&gt;  
      &lt;h:outputText value="Top unit content." /&gt;  
  &lt;/p:layoutUnit&gt;  
  
  &lt;p:layoutUnit position="south" size="100" header="Bottom" resizable="true" closable="true" collapsible="true"&gt;  
      &lt;h:outputText value="South unit content." /&gt;  
  &lt;/p:layoutUnit&gt;  
  
  &lt;p:layoutUnit position="west" size="200" header="Left" resizable="true" closable="true" collapsible="true"&gt;  
      &lt;h:form&gt;  
           &lt;h:outputText value="West unit content." /&gt;  
      &lt;/h:form&gt;  
  &lt;/p:layoutUnit&gt;  
  
  &lt;p:layoutUnit position="east" size="200" header="Right" resizable="true" closable="true" collapsible="true" effect="drop"&gt;  
      &lt;h:outputText value="Right unit content." /&gt;  
  &lt;/p:layoutUnit&gt;  
  
  &lt;p:layoutUnit position="center"&gt;  
      &lt;h:form&gt;  
          This fullPage layout consists of five different layoutUnits which are resizable and closable by default.  
  
      &lt;/h:form&gt;  
  &lt;/p:layoutUnit&gt;  
  
  &lt;/p:layout&gt;  
  &lt;/h:body&gt;
  &lt;/f:view&gt;
  &lt;/html&gt; 
  </code></pre>
  
  <p>The bg.css file contents are as follows:</p>
  
  <pre><code>body
  {
  background-image:url('images/bluebackgroundsmall.jpg');
  }
  </code></pre>
  
  <p>And the image displays as the whole page background without issues. Any help on how to get the image displayed inside the layout panes? or whether it's possible, I've seen several posts related to this topic with no answer. If I can display an image the second best thing would be to make a pane transparent, any idea how to do this - would I need to use css opacity basically?</p>