Thursday, March 28, 2024

So, You Want A Background, Huh?

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 &ltBODY&gt 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 &ltBODY&gt 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”>

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured