How to add an image as a background

Help / Discuss
,
1

I am fairly new to XWiki but I have a small but important question.

For our main page in our wiki we want to have an image as the background, but I have no idea how to do it and wasnt able to find anything regarding that topic. I hope somebody will be able to help me with my problem.

Thanks in advance!

2

Seems this is very hard to do if you’re not already a skilled coder.
I’d like to know this as well, web searches bring up results with steps that do not apply to the newest versions of xwiki.

  1. Accessing the Theme Editor:
  • Navigate to Administration > Look & Feel > Themes > Color Theme.
  • Select the theme you want to modify and click Customize.
  1. Modifying the CSS:
  • Go to the CSS section within the theme editor.
  • Find the CSS rule that styles the body element (or create one if it doesn’t exist).
  • Add the following CSS property to the body rule:

I can’t seem to find any CSS section under Iceberg, which is what I’m using.

3

Never done this myself, and yes you need to know CSS at least, but I think before editing the theme itself, this could be achieved with a Skin Extension.
Have a look here: https://www.xwiki.org/xwiki/bin/view/Documentation/DevGuide/Tutorials/SkinExtensionsTutorial/

4

That’s crazy, you need a comp-sci degree to follow that page.

Themes I’ve worked with in the past for other types of sites have adding a background image built into the admin GUI. I don’t necessarily need that, but someone who knows what they’re doing writing up a nice step by step set of instructions on how to add a background would be greatly appreciated.

I can follow along with steps such as I posted, unfortunately, those are just wrong. Poor AI can’t catch a break.

5

See https://extensions.xwiki.org/xwiki/bin/view/Extension/Flamingo%20Theme%20Application#HAdvanced:LESSCode

6

I put this into the LESS area, and there were no changes.

body {
  background-image: url("bin/download/FlamingoThemes/Iceberg/forrest.jpg"); /* Replace with your image path */
  background-size: cover; /* Make the image cover the entire page */
  background-repeat: no-repeat; /* Prevent the image from tiling */
  background-position: center; /* Center the image */
}

Once I put in the full path, it worked. What would the relative path be for that image?
I uploaded it through the theme’s ‘logo’ upload interface.

https://checkin.technospider.com/bin/download/FlamingoThemes/Iceberg/forrest.jpg

Thanks for the help so far. I had no idea LESS was for CSS.