AT&T Knowledge Network Explorer : Beyond Filamentality : Backgrounds

Background Color and Texture

You may have noticed that the pages Filamentality generates come in a plain, vanilla wrapper. White is a good compromise color because it goes with all other colors you might use in graphics or text. Also it's easy to read a page that's got a white background. Still, you might want to change it. Changing the background is similar to changing the links. Both use the body tag.

Go to your HTML document and find the BODY tag.
Drag across the BGCOLOR (background color) code or add it if it isn't there. Then insert your own new color codes. Save it and reload to see how it looks. Hint: You can drag across the color codes on another web page, then copy and paste into your document.

Tools to help you:

Dynamite color popup window from Visibone
Choosing a color - click on the ABCDEFG link to see the color as a background, from Project Cool.
Doug's Color Picker - select colors from a chart, then click to see what the page will look like.
Web Color Theory from Mundi Design - there are 3 ways to use this; click on one of the choices at the bottom right
TextColorizer - makes fancy gradient text and supplies the code for you; then you cut and paste it into your document. (slow)

Two Hints:

Lean toward the light backgrounds (dark backgrounds are nasty).

Jot down the 6 digit code (your brain doesn't need to remember anything as dull as these hexy dexy RGB color codes).

:
Did Someone Say "Textured Background?" You may have noticed the light, subliminal spider webs hanging in the background of Filamentality and thought, "Dang, that's really cool, man. I wish I could put a picture in the background of my page." Or you might have thought, "Cripes, I hate those pesky background images, they never look good." Well, if you're somewhere in the first group and want to experiment with textured background images, it's about the same as background colors (above.)

Find a Texture you like.
Save the image once you've found the background textures/images you like. Here are the steps to getting them into your page:

* Hold down the mouse button on an image you want (try the right button if you've got two on your mouse).
* This tosses you into the Save dialog box. The trick here is to make sure you do two things:

* Save the file in the same location as your HTML document.
* Remember or copy the name of the graphic file (hint: you can change the name before you save it if there's a name you want to give it that makes more sense to you).
View the images you wanted to test out on your Web page:

* Flip back to your HTML document.
* Find the body background line again.
* This time you'll actually do a little programming. First, drop the cursor right in front of bgcolor=FFFF99:
Then type in background=the name of your file (notice: it might be in a .gif or .jpeg format). Make sure the commands (Body, bgcolor, text, etc.) are all separated by a space.
Save the HTML and reload to see how it looks. Didn't work? One reason might be: you got the image file name wrong. The image file isn't in the exact same folder/directory/diskette as the HTML document; check your programing - "background="; try the thorough "Save as.." and Browser "File - Open File" maneuvers to make sure you're loading the file you're updating with a background image.
Helpful Hints:

Stick with a subtle background image (busy or dark patterns are gross).
Copy a few images then if you don't like one, you have other choices.
If you have access to a graphics program, try making the background graphic lighter or increase the brightness. This will make them fade into the background more.
If you're going with a background image, you might want to change your background color to the same general tone in case the person using your page has image loading turned off. This way if you fiddle with text colors, images, or anything else, the background and the text will still show up.

So, do you like the background image? If you don't, you can return to a colored background by cutting the background=.... Either way, you're probably ready to play with changing the text and link colors.

First posted 1997.
Last modified Tuesday December 11, 2007

© 2008 Copyright AT&T Intellectual Property. All rights reserved. AT&T and the AT&T logo are trademarks of AT&T Intellectual Property. This site contains links to public sites whose content and language do not fall under the jurisdiction of AT&T. The views and opinions expressed at these sites are not those of AT&T. Please read our Disclaimer.