How to Change the Background of Your Wikispace Using CSS

August 9th, 2009

Don’t let the title scare you, teachers! I show you step-by-step how you can change both the background color and background image of your wikispace using CSS. To change your background image, you first have to upload your image to your wikispace, and then you need to create a custom template based off of one of the default wikispace themes. Watch the video tutorial for complete instructions.

A couple of things I’d like to mention when changing your wikispace theme…

ALWAYS BACKUP YOUR WIKISPACE FIRST! To do this, go to Manage Wiki, then Exports, then click the Export Wiki button. It will then email you a backup copy of your wikispace. Do this FIRST before changing your theme, just in case. If you don’t like the color or background image you’ve added to your custom template, you can always go back to the Themes section of your wikispace, and change it back to the default theme.

Tags:

  • EfrenR

    Does the picture have to be a certain type? Of a given parameter? Not seeing picture on background. Thanks

    • http://wikispacetutorials.com admin

      Hey Efren, thanks for your question. I’m glad you asked because I didn’t really clarify what type of picture it needs to be in the video. Really, the picture needs to be one of these 3 file types: .jpg, .png, or .gif. Any one of those 3 will work. Let me give you an example on what the CSS should look like when adding a repeatable background for the body selector in your wikispace template…

      
body {
background: url(/file/view/yourimage.jpg) repeat;
}

      Wikispaces has already declared the background property for the body selector within the template that you’re using. So, before you add your repeatable background CSS to the background property that they’ve already included, you can either delete what they’ve already included for the background, or you can just hide it.

      If you delete what’s been included in the background property, it should look like this…

      
body {
background:
}

      If you want to hide the background property that they’ve already included, you can do that by adding a /* and then at the end, adding a */, like this…

      
body {
/* background-color: < $WikiBackgroundColor$>; */
background: url(/file/view/yourimage.png) repeat;     /* < --- your background CSS here */
}

      Anything included in between /* and */ will be hidden. So, I put a /* before the background-color selector, and then put a */ at the very end, after the semi-colon. Does that make sense? Let me know if you're still having issues.