How to add custom background graphics to your Customer Focus website

The instructions differ slightly depending on the template you're using, so please be sure that you have correctly identified your template before implementing these instructions!

Classic Template

1. First upload your custom background image via Settings > Uploads

Click on the Image folder and then browse to your background graphic file, and upload.

Uploading custom background images

Classic template with custom background

Once the graphic is uploaded, click on the [^] link next to it; this will open the graphic in a new tab. Keep that tab open.

2. Now head to Appearance > CSS.

Copy this code into the box.

body{

background : url(/froot/54672/uploads/image/bg.png) no-repeat center top #FFFFFF;

}

It should look like this:

Custom CSS

Now go back to the tab you have open with the background graphic. From the URL, copy everything from /froot onwards as shown in the below example.

Custom background

Go to the Appearance tab again, and paste over the text in the brackets with your selection.

So using my example, this...

Custom background 5

Becomes...

Custom background

A couple more things you might want to change are these elements:

no-repeat center top #FFFFFF;

What this means is that the background is not going to 'tile and repeat' itself. You'll want to keep this selection if your graphic is a distinct picture like clouds or squiggles, but if it's a more simple pattern that can be duplicated, just delete the 'no-repeat center top' element.

The #FFFFFF means that where the background stops, it will show that color instead. This isn't required if you are going to have a repeating background, so you can delete it. However if your background is not repeating, you may want to change the color that shows once the background graphic finishes.

Just replace the #FFFFFF (which is white) with the hex value of your preferred color. http://www.w3schools.com/tags/ref_colorpicker.asp is a great resource for picking hex values.

3. Scroll up to the top and click on Save Changes.

Custom background graphic

Click on view site and you should see your background graphic!