So You Want a Background, huh?

 Here's what is covered below. Use these to jump or read it all!
[Background Colors][Text Colors][Background Wallpaper][Make Your Own Wallpaper] 

First let's talk about only changing the color of the background

Changing background colors is very simple. You need two things:
     1. The command for changing any background item immediately follows the <TITLE> and </TITLE> commands. To change just the background color, enter this command;

 

<BODY BGCOLOR="######">
 
     2. Now you need a color code. This code will tell the browser what color to use. The 6 digit code will go in place of the "######" in the above command. The technical term for these little 6 digit puppies is a Hex Code.

     The codes are not very user friendly and you need a chart to let you know what code makes what color. I've created a page showing some basic color codes, 104 in all. There are actually over a thousand hex codes producing every imaginable shade of red, or yellow, or whatever. You'll see what I mean. Look over the page--write down a couple of codes--and come on back to finish the tutorial.

     Click on the page name to go: Goodies Color Page

 

     Welcome back. No doubt you looked around and saw a couple of colors. Neat, huh? Hopefully you brought back a color code (hex code) you'd like to use - but if not, no matter - I have one; "FFFFFF." That code will produce pure white. (WHY FFFFFF?!?!?) I told you the codes weren't too nice.

      Please Note! When you write these codes, write them with a "#" sign in front of the code. Be sure to enclose it all inside of quotation marks!! So now that I know the code of the background I wish to create - I simply insert the code into the command and place the command on the html page just below the &ltTITLE> command. The code for a white background will look like this:

<BODY BGCOLOR="#FFFFFF">
 
Can I use these codes to change text colors?

      Yup, but that's a whole different tutorial: So You Want Some Text Color, Huh?. Finish up here, and then head over for some brain-packing fun.

Background Wallpaper

     The name is a bit misleading. When you see an html page with wallpaper, or backgrounds, it is not one continuous .gif or .jpeg. It is one small .gif or .jpeg repeated again and again...and it is equally as simple as the colors above.

      First you need a background. I make most of mine. I'll get to making a background in a second.

     Since you need a digitizer to make backgrounds, and I know not everyone has one of these at their fingertips, the best way to use a background is to grab one off the Internet. Here are a couple of places I have found quite helpful. Again, you might want to bookmark the ones you like. Just click on them to go...

 

NetScape's Background Sampler - This takes forever to come in, but it's a good collection.
KPT Background Sampler
...both good sites.
 I also have a few listed below.
 
     Welcome back. Now that you have a .gif or .jpeg for your background, you will want to put it in the same directory you place all your other images into.

 Again, all background commands come right after the &ltTITLE> command. The command is;

 

<BODY BACKGROUND="image.gif">

     All color commands are overridden by the BODY BACKGROUND command. Mainly because the wallpaper goes over the color.

BUT...it will take a bit of time for the background .gif or .jpeg to load. It looks nice to put a color command before the BODY BACKGROUND command. What happens is that your page goes to a certain color and then the wallpaper wipes over that color. Nice effect.

Please Note! The use of two commands, one for BGCOLOR and the other for BACKGROUND, does not work on upper level browsers. You'll need to put them both together in the same command. Something like this:

 

<BODY BGCOLOR="#FFFFFF" BACKGROUND="image.gif">

Make Your Own Wallpaper

There are no hard or fast rules to this, as you can see from above, but here's what I have found works best...

 
Easy Wallpapers
1. Find a piece of paper, other than white, that already has text upon it. That way you know when you use it as a background, your text will show up.
2. Paper that works well for this - diplomas, citations, stationary, fancy copy paper from Kinkos
3. Simply scan the paper and crop a perfect square. Make it kind of small. 1' X 1' works real well.
4. Use it as a background. Most of the wallpapers above were made this way

Harder Wallpapers
1. Find a geometric image to scan. Bricks work well as does lined paper.
2. Scan the picture.
3. Crop the picture so that the items on the ends and top are cut exactly in half. That way they will line up when posted as wallpaper.
4. This is tough. Try doing one on lined paper first for practice.

 -or- If you have access to an image program, try this. It works a lot better than you might think.

 1. Scan any picture you want as a background, and crop it kind of small.
2. Use your image program to do an "offset" of 50%. (This turns the picture in on itself by half)
3. Use the program to touch up any lines that don't come together at the midpoint of the graphic.
4. Save it. Doing this guarantees that the graphic you just created will line up perfectly as a background. It works, trust me. Have I steered you wrong yet?