CODEWITHSUNDEEP
javacssjsfprimefaces
Alaph432
Alaph432

Reputation: 143

background image in layoutunit

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?

Upvotes: 2

Views: 13003

Answers (2)

BalusC
BalusC

Reputation: 1108632

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

Upvotes: 3

maple_shaft
maple_shaft

Reputation: 10463

I just copied and pasted your code, only changing the URL of the image and I was able to get the background to show up. If you look in the HTML Style tab of Firebug you can see the following styleclasses being applied to the layout unit div element and you can clearly see that your style class overrides in the <head> tag are not getting overridden.

Firebug Screenshot

You will notice the style I highlighted coming from the XHTML page. The image shows up.

I think your issue is that from the context of your page, it is not able to locate the image resource. Instead of doing images/foo.jpg try doing /images/foo.jpg and see if that makes a difference.

Upvotes: 0

Related Questions