background image in layoutunit

java css jsf primefaces

12,961

    <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" />

12,961

Author by

Alaph432

Updated on July 26, 2022

Comments

Alaph432 almost 2 years

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?

Alaph432 over 12 years

thanks, yes it was an incorrect path issue - I was assuming the URLs would be the same in both ways of referencing the image
Hosein Aqajani over 6 years

Is it possible to set background image for each <p:layoutUnit> ? I have tried the style attribute in this element but it does not work!