question to background-images

[rschwegler]

Hello to all,

I'm pretty experienced in using stylesheets and do like to use background-images for certain effects.

Now we're trying to use richfaces for a short time - still experimental status -
and I did not get 'my' background-images shown.

Especially in a menu (rich:panelMenu) , where the component 'throws' a lot of tags with lots of classes. I know , there is a possibility of using a left or right column to place an icon (but it will always be streched to 16x16 px) , but in many cases , when you need special and pure styling , background-images are needed.

- Is this in richfaces not possible?
- Why do I see none of them?
- Or is it simple a question of the path to the images? I had about this one: url(/images/common/iconxy.gif)

Thanx for your attention. Would be nice to read some interesting answers.

[ilya_shaikovsky]

please for such cases add more details.

your current code snippets will be helpful to understand the problem more clearly.

[rschwegler]

o.k. let me try :

for example
if I try to style a menu ,
I can aim this class : rich-pmenu-top-group div

therefore I take this one-> panelmenu.xcss
which I find in the skin project
...\exampleSkin\src\main\resources\examplepackage\exampleskin\css
there I try about:

.rich-pmenu-top-group-div {
 background-image: url(/images/common/background.gif);
 background-repeat: no-repeat;
 background-position: top left;}

and I don't see this afterwards .

but if I say

.rich-pmenu-top-group-div{border:1px solid red;}

I can see this it works

perhaps I should say we build our own skin with maven , and after building the skin I put the exampleSkin-1.0.-SNAPSHOT.jar file into the lib directory of the richfaces project

the code on the menu.xhtml site goes like this:

..

<rich:panelMenu ...>
 <rich:panelMenuGroup label="example1">
 <rich:panelMenuItem label="eins.eins">
 </rich:panelMenuItem>
 <rich:panelMenuItem label="eins.zwei">
 </rich:panelMenuItem>
 <rich:panelMenuItem label="eins.drei">
 </rich:panelMenuItem>
 </rich:panelMenuGroup>
 <rich:panelMenuGroup label="example2">
 <rich:panelMenuItem label="2.one">
 </rich:panelMenuItem>
 <rich:panelMenuItem label="2.two" >
 </rich:panelMenuItem>
 <rich:panelMenuItem label="2.three" >
 </rich:panelMenuItem>

..

[nbelaevski]

You should use XCSS format to define background image resources served using RF resources framework.

[rschwegler]

Well,

thanx for answering , but as I told above , I do use the xcss format (like in the example panel.xcss) ...

or what do you mean with RF resources framework?

[nbelaevski]

Use special XCSS tag for this:

background-image: url(/images/common/background.gif);

to signify that background.gif should be served from classpath by RF resources framework.

[rschwegler]

from the first post I was thinking out loud , whether the path to the image is not right (because its not found)
but I don't know, what would be the right path or syntax.

can U tell me?

[rschwegler]

update to my post :

got it !

we had had a c:data area in the xcss file where i did this:

background-image: url(/images/common/background.gif);

which didnt work


no i put the path before with namespace u: and f: and there the path works

<u:selector name="a.button_background:link, a.button_background:visited">
 <u:style name="background-image">
 <f:resource f:key="/images/common/pfeil-rechts.gif"/>
 </u:style>
</u:selector>