Backgrounds using CSS

This is a tutorial to teach you how to use backgrounds on your page. I'll be teaching you with a basic default css template and show you how to edit the properties.

1. Open up the page you want to add the background CSS to, or create a new page, or if you have a header file, use that. Add this code anywhere in between the <HEAD></HEAD> tags of your page:

2. Now change http://your-site.com/background-url.gif to the url of your background, whether you have it uploaded to your site or an image host like Photobucket.

Background Fixes

3. If you want your background to stay fixed in the same place when you scroll up or down the page, add this code below your background url part to look like this:

background-image: url(http://your-site.com/background-url.gif);
background-attachment : fixed;

Background Repeats

4. If you want your background to repeat or stay in 1 place, add one of these codes below:

This will repeat the background:
background-repeat : repeat;

This will prevent the background from repeating:
background-repeat : no-repeat;

This will repeat the background downward once:
background-repeat : repeat-y;

This will repeat the background horizontally once:
background-repeat : repeat-x;

Background Positions

5. If you want your background in a certain position use one of these codes (this is usally used when u dont repeat your background:

background-position : top left;

background-position : bottom left;

background-position : top right;

background-position : bottom right;

background-position : top center;

background-position : center center;

Background Colors

6. Now If you want your background a certain colour, rather than an image OR if you are using an image and not repeating it, add this code and change the #000000 to either the hex colour of your choice or a colour word (e.g. red) and save.

background-color: #000000;

Background Overall Code

SOOO.... overall your background code would end up looking something like this:

<style type="text/css">  </style> Hope this tutorial helped you out!