Stylesheet extension (css): background-image with attachment

Help / Discuss
1

Hi.

I do have a complete html webpage with javascript and css inside. To put it into an article I putted all html inside the html macro, all javascript inside a javascript extension and all css inside a stylesheet extension.

Everything works fine but I do have a css rule that I don’t get working:

.play_pause_button {
    background-image: url('play_pause.png');
}

The image is attached to the article.

What I tried:

.play_pause_button {
    background-image: url('WebHome/play_pause.png');
}

But I saw that the image in the console was searched at:
/download/Space/Subspace/Article/WebHome/play_pause.png?rev=1.1
While my approach above made it here:
/ssx/Space/Subspace/Article/WebHome/play_pause.png

Of course I could use the absolute url of the image but a relative would be better. (So moving the article later won’t break this.)

I tried another thing:

.play_pause_button {
    background-image: [[image:play_pause.png]];
}

I enabled parsing the stylesheet extension but that created an invalid rule.

.play_pause_button {
    background-image: url([[attach:play_pause.png]]);
}

Made the rule valid but not working too.

Is there another idea?
Simpel

2

Hello @Simpel,

You can find some examples of how to do that in xwiki-platform here with a skin file or here with an attachment

Regardless of the way to resolve the background-image url, the most important thing is to allow your XWiki.JavaScriptExtension XObject to be first evaluated using Velocity by setting Parse content to Yes.

3

Thanks @mleduc.

.play_pause_button {
    background-image: url($doc.getAttachmentURL("play_pause.png"));
}

That’s working setting Parse content to Yes on the StyleSheetExtension.

1 Like