hot to make ui-layout-unit transparent

[kagel]

I'm wondering how to implement a page with having an fullsize image as background ?

Code: Select all

css:

.bild {

    background: url('./css/background1.jpg')!important;
    background-repeat: no-repeat!important;
    background-attachment: fixed!important;
    background-size:cover!important;
}

.trans{
    background-color: transparent!important; 
}


page:

1.works fine, and display the image as background in center:

<p:layout fullPage="true" styleClass="bild">
<p:layoutUnit position="north" styleClass="trans">
</p:layoutUnit>
<p:layoutUnit position="center" styleClass="bild">
</p:layoutUnit>
</p:layout>

2doesn't work white background:

<p:layout fullPage="true" styleClass="bild">
<p:layoutUnit position="north" styleClass="trans">
</p:layoutUnit>
<p:layoutUnit position="center" styleClass="trans">
</p:layoutUnit>
</p:layout>

therefore it would be necessary to make the layoutunit transparent to show the layout layer with the image, is that possible?
Thanks for hints