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.

7

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.

Not sure if you will ever see this, but Iā€™m just getting around to setting up my own self-hosted site with wiki. I was able to get a background image loaded as an attachment to the theme customization page (same result as if you had uploaded it via the logo upload):

// Custom background for all pages
body.skin-flamingo {
background-image: url(ā€œ/xwiki/bin/download/FlamingoThemes/Slate/BackgroundTest.jpgā€);
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/
background-attachment: fixed; / optional: keeps background steady on scroll */
}

It seems the issue with your path is that you are missing the /xwiki/ at the front.

1 Like