Bite sized tutorials

Daily tutorials

1. Editing Text

2. Borders and Images

3. Moving and Resizing

4. Applying Mouseovers

5. Adding Flash

6. Templates

7. Backgrounds

8. Global Styles

9. Navigation

10. Forms

Button guide

Day 7 - Changing Background Colours and Images

Todays tutorial will show you how to manipulate background colours and images on the Pixx website. To follow this example, open the template in the templates folder.

Step 1 - Change the background image

From the drop down menu at the top of the screen, select the 'outer container' element either from the drop down list or by clicking on it. Click the background button, then select the image button to open the file browser. Select body_bg2 from the list and click 'select background'. Now Click apply.

Step 2 - Change the background repeat

Click on the background button again and you will see the background repeat options. These only apply to background images. You can repeat an image across the element, down the element, over the entire element or select no repeat (see examples below). For this background, we only want the image to appear once, so select no-repeat.

Step 3 - Change the background colour

Click the background button again and click on the colour button. This will open the colour chart menu. Click on a colour in the options and click apply. Click apply again to see the colour change.

Summary

In this tutorial you learned how to change background colours and images on your website.
This Tutorial is Day 7 in a Series of 10 Tutorials designed to teach you the features of Webmanager. If you would like to jump straight to day 8 tutorial click here to progress.
http://www.webwam.co.uk/support/daily/globalstyles
If you would like to learn more about working with background images and colours. Visit our bitesize Tutorials:
http://www.webwam.co.uk/support/bitesized/index