ADF panelGroup component's background image in CSS does not render

Question

Hi,
I have an issue with the panelGroup component, where a background-image specified in the styleClass DOES NOT RENDER when deployed on the OAS. It works fine when I run the page on my local OC4J.
I've verified that the image I use is deployed correctly on the server.
We are using :
JDeveloper Studio Edition: 10.1.3.3.0.4157 (Build JDEVADF_10.1.3.3.0_NT_070619.1129.4157)
Oracle Application Server: 10.1.3.5.0 running on RHEL 5.
I'm customizing pages of an ADF application to change the branding and skinning. The page header region used in the application uses a 'panelPageHeader' and the image I need to introduce is part of branding and must be rendered above the application menus (2 levels: 1->MenuTabs, 2-MenuBar).
If it would help to see how my page renders locally, here's the link: http://tech-nik-alley.blogspot.com/2010/09/adf-panelgroups-background-image.html
(The brightly colored bar above the menus is newly introduced, ABC_Lightbar.jpg).
Using an objectImage with my light_bar image as source, directly in the facet menu2, causes the alignment of all pages to get disrupted. Hence the work-around of using the image as a background.
A copy of my pageHeader region is below, with comments. The panelGroup component newly introduced is in the facet "menu2". I've added the CSS definitions in the page as comments as appropriate.
Any pointers on how to debug further, work-arounds etc. are appreciated.
TIA and regards
Deepak.
=====MY PAGE HEADER REGION====
<af:regionDef var="attr">
<af:panelPageHeader styleClass="ss0" > <!—ss0 is "padding:0px;margin-left:14%;margin-right:14%;margin-top:0px;margin-bottom:0px;display:block;background-color:transparent;" -->
<f:facet name="branding">     
<af:panelGroup styleClass="ss_brand"> <!--ss_brand is "display:block;margin-bottom:12px" -->
<af:objectImage shortDesc="#{imageBean['SS_COMPANY_LOGO'].description}"
source="#{imageBean['SS_COMPANY_LOGO'].physicalName}"/>
</af:panelGroup>
</f:facet>
<f:facet name="menuGlobal" >
<af:panelGroup layout="horizontal" styleClass="ss00" rendered="#{attr.globalMenuShown}">     <!—ss00 is "margin-right:10px;" -->
<f:facet name="separator">
<af:objectImage source="#{imageBean['SS_GLOBAL_SEPARATOR'].physicalName}" shortDesc=""/>
</f:facet>
<af:menuButtons>
<af:goMenuItem text="#{sessionBean.authenticated?pageHeaderBean.loggedInUserInfo:messageBean.SS_GEN_GUEST}"/>
</af:menuButtons>
<af:menuButtons startDepth="0" var="menuGlobal" value="#{menuModel.model}">
<f:facet name="nodeStamp">
<af:goMenuItem text="#{menuGlobal.label}"
destination="#{menuGlobal.fileName}"
rendered="#{menuGlobal.type=='global' &amp;&amp; menuGlobal.rendered}"
/>
</f:facet>
</af:menuButtons>
</af:panelGroup>
</f:facet>
<f:facet name="menu1" >
</f:facet>
<f:facet name="menu2" >     <!-- facet menu2 originally has a 'menuTabs' (level 1 menu) on top of a 'menuBar' (level 2 menu) -->
                    <!-- Change required: introduce a light_bar image above level 1 menu (menuTabs). The image spans the page -->
<af:panelGroup rendered="#{skinFamily.menuLayout=='horizontal' and attr.otherMenuShown}">
     <!--Change: new panelGroup introduced, with a background image in the styleClass -->
<af:panelGroup layout="vertical" styleClass="pageHeaderLightBar"> <!-- pageHeaderLightBar is "background-image:url(/ss/skin/ABC/images/ABC_lightbar.jpg); " -->
<!--<af:objectImage source="/ss/skin/ABC/images/ABC_lightbar.jpg"/>-->     <!--Specifying the image directly, disrupts the all other OOTB pages-->
<af:objectSpacer width="22px"/>
</af:panelGroup>
<af:panelGroup styleClass="pageHeaderMenuLevelOne"> <!-- Another place where a back-ground image is used for a panelGroup using the styleclass -->
<af:menuTabs startDepth="0" var="menuTab" value="#{menuModel.model}">     <!-- The level 2 menu using menuTabs -->
<f:facet name="nodeStamp">
<af:goMenuItem text="#{menuTab.label}"
destination="#{menuTab.fileName}"
rendered="#{menuTab.rendered and menuTab.type!='global'}"/>
</f:facet>
</af:menuTabs>
<af:menuBar startDepth="1" var="menuBar" value="#{menuModel.model}">     <!--The level 2 menu using a menuBar -->
<f:facet name="nodeStamp">
<af:goMenuItem text="#{menuBar.label}"
destination="#{menuBar.fileName}"
rendered="#{menuBar.rendered}" />
</f:facet>
</af:menuBar>
</af:panelGroup>
</af:panelGroup>
</f:facet>
</af:panelPageHeader>
</af:regionDef>
===================================

Answer 1

'background-image:url("../image/Sunset.jpg")' is a relative URL... relative to the final generated markup. It should be wrong like 99% of the times. You should rather use a styleClass and deal with the background-image with skinning as the skinning engines knows how to deal with such urls. Note that you'll most likely have to define a new resource loader and servlet mapping for the ResourceServlet. I know someone made a blog entry about that, was it Frank or Shay? Hmmm cannot remember... Maybe John as well. Anyway a Google search should yield good results for adf resource loader I think.
Regards,
~ Simon