www.htmlgoodies.com/tutorials/backgrounds/article.php/3478751

Back to Article

So, You Want A Background, Huh?
By Joe Burns
January 4, 2005

Use these to jump around or read it all...
[Background Colors]
[Text Colors]
[Background Wallpaper]
[Make Your Own Wallpaper]

Background Colors

Changing background colors is very simple. You need two things:

  • A command that alerts the browser (like Netscape or IE) that the color is going to be changed and...
  • A color code.

1. The command for changing any background item is found within the page's BODY tag. To change just the background color, enter this attribute:

<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 here to go to the 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, you may notice I write them with a "#" sign in front of the code. It used to be that you had to do that but not any more. You may want to just use the six-digit 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 attribute on the page inside the <BODY> tag. The code for a white background will look like this:

<BODY BGCOLOR="#FFFFFF">

Text Colors

     Yup, but that's a whole different tutorial: So, You Want A Color Code, 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 the making of 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 that are 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 load, 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 attributes come inside the <BODY> tag. Like so:

<BODY BACKGROUND="image.gif">

     All color commands are overridden by the BODY BACKGROUND command. That's 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">

Here are some links to a bunch of backgrounds that I've made or liked enough to use. Read about it and if it sounds like you, click to see it. (I'd like to show them to you right here, but this site gets over 2 million hits a month and posting them all here slows the system way too much.)

This was created using the PaintShop Pro emboss filter on a simple black and white drawing. It's a graduation hat.
Click here to see it!
I made this by scanning an award I got for something or other. It's a blue speckle field.
Click here to see it!
This is the background on this page.
Click here to see it!
This is a nice white background with some texture like linen.
Click here to see it!
This was taken from another site. It's like brown cloth.
Click here to see it!
You like blue? We got blue!
Click here to see it!
This looks like the hood of your car after a good wax and rainstorm. Droplets everywhere.
Click here to see it!
I made this one by scanning the cover of Steely Dan's Greatest Hits. It's a dark gray texture.
Click here to see it!
I made this one by scanning a Christmas card from my Aunt. It's a light brown speckle.
Click here to see it!
Ditto this one on the Christmas card. Except this card was from my Mom. It's a darker brown speckle.
Click here to see it!
I made this by scanning the page of a scrapbook then playing with the color in PaintShop Pro. It's a deep purple background.
Click here to see it!

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 on 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, stationery, or fancy copy paper from Kinkos.
3. Simply scan the paper and crop a perfect square. Make it kind of small. 1" x 1" works really 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?

One More Thing...
If you've always wanted to know how to create a background that has a stripe running down the side. Go Here!

[Background Colors]
[Text Colors]
[Background Wallpaper]
[Make Your Own Wallpaper]