In this tutorial I’m going to teach you how to insert a repeating background into your Wikispace using CSS. If you remember in the last background CSS tutorial, I taught you how to insert just a large image and have it be spread across the entire screen. So this image is probably I think 1600 pixels wide but it’s not very tall so we actually use CSS to make it go down to the bottom, but the great thing of adding a repeating background is that you’d never had to worry about it not filling the entire background space for your website in this case our Wikispace.

So let me show you how to do that, let’s go back into edit. And I guess before you do anything else you need to find an image that is a repeatable background. Let me show you what I mean by that. I want to head and search for Squid Fingers patterns. There was a pattern site that I‘ve found a while ago and I knew that it was Squid Fingers so I just type that in and is popped up and these images are about just a little under 200 pixels each square. And when we repeat this in the CSS it will spread across the entire background of our Wikispace. So as you can see if I just click on these there a lot of different types that you can grab and download and use as repeatable patterns or backgrounds for you Wikispace.

So let me go back to our Wikispace and I went ahead already uploaded the pattern but again I’m going to go ahead and just repeat the steps on how you do that. You would first go to upload files and then will click on browse and then find the image on your desktop, I’ve already found mine, and then you click on upload. Now, when it uploads, it’s going to bring you to this tab right here. Okay. And remember since we’re putting this into the CSS of our Wikispace we don’t want to insert the file but we do want to know what this filename is right here because we’re going to reference this within the CSS. So if I hover over it I named it something simple, I just named it pattern.gif. So I need to remember that when I reference it within the CSS. Okay so I’m going ahead to close in on this and after you upload the file, just remember to click on save right here.

Now to do this, we have to go in our page template, if you remember from the last tutorial, my first had to click on manage wiki. I had to go look and feel, I had to go to change or make a new theme and then I had to create a custom theme from one of the default themes that Wikispace provides you with. I went ahead and decide to use this theme right here and I created a custom theme by going down here and typing in the name glassy and then choosing the glass theme as a starting point and then click on edit. Since I’ve already got that theme activated, I’m going to click on edit, alright, this is where we entered in the green background that you see right here. Okay, so this is the green background the filename, the image name for what is called bg.jpg. But we need to change that to pattern. And actually we don’t need all of this. All we really have to do is take off the color in the background, or the background color. Since this is a repeatable background we’re not going to need a background color within our CSS.

But if you remember the way you reference it from your Wikispace is first you do file, view, and then the image filename. So, mine was pattern.gif. And then we need to change this from No repeat center top or not want to position this in any way we just need to repeat it. So we’re just going to put repeat. And then I’m going to click on save and there it is. You can see this small square 200 pixel images is now being repeated across the entire width of the screen and it doesn’t matter your screen is or what size someone else screen is they should be saying this repeated background all over the screen. So, just a really cool way add a repeated background to your Wikispace. And it gives a little bit variety too instead of having a solid color,

So, I hope this was useful for you, if you don’t mind, if you think this would be helpful for someone else you can go ahead and share it by twitting it to someone else using Twitter or we’ve also provided some other social media, social networking sites that you can pass on this post to. Again thanks for watching Wikispace tutorials. You can follow us on twitter at www.twiter.com/wikispacetuts and you can also subscribe to our email list by clicking on the email link on the homepage or you can subscribe via RSS. Thanks again for watching and come back soon.