Home/ Questions/Q 7050305
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T03:07:39+00:00

is it possible to display a background image inside a layoutunit pane? I’ve tried

  • 0

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:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <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" >
<f:view contentType="text/html">
    <h:head>
        <link rel="stylesheet" type="text/css" href="css/bg.css" />
        <style type="text/css">
            .ui-widget{font-size:90% !important;}
            .ui-layout-unit-content{background-image:url('images/bluebackgroundsmall.jpg');}
        </style>
    </h:head>            
<h:body>
 <p:layout fullPage="true">  

<p:layoutUnit position="north" size="100" header="Top" resizable="true" closable="true" collapsible="true">  
    <h:outputText value="Top unit content." />  
</p:layoutUnit>  

<p:layoutUnit position="south" size="100" header="Bottom" resizable="true" closable="true" collapsible="true">  
    <h:outputText value="South unit content." />  
</p:layoutUnit>  

<p:layoutUnit position="west" size="200" header="Left" resizable="true" closable="true" collapsible="true">  
    <h:form>  
         <h:outputText value="West unit content." />  
    </h:form>  
</p:layoutUnit>  

<p:layoutUnit position="east" size="200" header="Right" resizable="true" closable="true" collapsible="true" effect="drop">  
    <h:outputText value="Right unit content." />  
</p:layoutUnit>  

<p:layoutUnit position="center">  
    <h:form>  
        This fullPage layout consists of five different layoutUnits which are resizable and closable by default.  

    </h:form>  
</p:layoutUnit>  

</p:layout>  
</h:body>
</f:view>
</html>

The bg.css file contents are as follows:

body
{
background-image:url('images/bluebackgroundsmall.jpg');
}

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
        <style type="text/css">
        .ui-widget{font-size:90% !important;}
        .ui-layout-unit-content{background-image:url('images/bluebackgroundsmall.jpg');}
    </style>

    With the style and background image URL definied this way, the background image URL is relative to the current request URL (the one which appears in the browser address bar). So imagine that the page is requested by:

    http://localhost:8080/contextname/somepath/someview.xhtml

    Then this CSS declaration expects the background image to be exactly on this URL:

    http://localhost:8080/contextname/somepath/images/bluebackgroundsmall.jpg

    In other words, in the same folder as where the view file is located. You need to make sure that the URLs and locations are correct. If you’d like to specify the background image URL relative to the context path, then you need to prepend it with #{request.contextPath}.

            .ui-layout-unit-content{background-image:url('#{request.contextPath}images/bluebackgroundsmall.jpg');}

    This will expect the image to be exactly on this location:

    http://localhost:8080/contextname/images/bluebackgroundsmall.jpg

    However, the canonical approach is to put the CSS declaration in its own CSS file which you load by the JSF <h:outputStylesheet> tag. This requires the resources to be in the /resources subfolder. So if you have the styles in a /resources/css/style.css file and the CSS background images in the /resources/css/images folder, then it will just work outright if you use the following instead of the whole <style>

    <h:outputStylesheet name="css/style.css" />
    • 0