Want to change the background colour / image on your SharePoint Wiki Pages? Well it’s easier than you think. And don’t be scared because it involves adding a web part and some code – if I could do it – so could you!!
For some background info on Wiki Pages, refer to my previous blogs Wiki Pages for Organograms and Profile Pages and Using Wiki Pages for Business Process Mapping
Adding a different background colour:
Edit your wiki page > Insert > Web Part > Media and Content > Script Editor > Add:
Now edit the Script Editor by clicking on the dropdown on the right of the web part > Edit Web Part > Edit Snippet:
The screen will open where you need to insert the code to change the background colour. Paste the code here (remember to change the hex colour code to the colour you’ve chosen > Click on Insert > Click on Apply:
Save the Wiki Page. Keep in mind that the colour will be affected by the theme applied to your site. That was easy, right?!
Adding a different background image:
First you need to upload the image to an existing image library, in this example I’ve used my site assets library. Make sure that ‘everyone’ has read access to these images.
1. Upload the image to your SharePoint site
2. Copy the URL to your image by clicking on the image until only the image is visible > copy URL
3. Edit your wiki page (and follow the same steps as above)
4. Insert Tab > Web Part > Media and Content > Script Editor > Add
5. Edit Web Part > Edit Snippet
6. Add the following code:
7. I’ve added “!important” to override any existing styles SharePoint might want to apply on this page. On O365 I also had to make my Image URL relative (by replacing the server/site with ../ ) before it would work.
8. Click on Insert > Click on Apply
Read more:
If you know the RGB, use the RGB to HEX conversion tool, if you’re not sure, you can use the HEX (HTML) colour picker from W3Schools and also refer to the 216 cross-browser colour palette.
Read more on the W3Schools site about the position / repetition of images
Voila!!
And that’s a wrap for today! Enjoy.
May 18, 2015 at 1:28 am
Great, well written “how to” Tracy! Thank you.
May 18, 2015 at 5:24 am
Thank you Gerry. Glad it helps!!
February 20, 2020 at 5:29 pm
Great Tracy, after hours of searching through Microsofts own ‘manuals’ I finally hit your page, and I managed to actually add a background image to a wiki page on a Sharepoint online site. So thanks and a like a gazillion kudo’s to you for helping me out!!
Now for the next step, using this wiki page background image as the image in the wikipages webpart on the parent page, which now shows a black box with a big question mark, and the tooltip ‘no images has been found for this object’.