On this page, you'll find: HTML for Background ImagesAdd A Background - Step by Step InstructionsAdding a Background ColorAdding Background, Text and Link Colors Step by StepSome Things To Experiment WithTroubleshooting Problems With BackgroundsHTML for Background ImagesIf you want to use a background tile to add a background image to your web page, you will want to modify the BODY tag. <BODY BACKGROUND="filename.gif"> This tag should go after the close of the </TITLE> tag. The beginning of an HTML document with a background tile would look like this:<HTML> <HEAD> <TITLE> Your Web Page Title </TITLE> </HEAD> <BODY BACKGROUND="filename.gif"> Add A Background - Step by Step Instructions You will need the web page you saved from the first tutorial, and an image to use as a background. You can create your own web page backgrounds, or download backgrounds from various graphic archives. You can also download the image to the left by clicking your right mouse button (Mac users click-and-hold) until you see a menu. Select Save Image As to download this background for use in your example. Download it to the same folder that you saved your HTML file to.
For this example, let's suppose that your background is named back.gif. Open your HTML file in your text editor, and change the BODY tag to read: Then save your file. You can compare your page to the cheat sheet for this tutorial, and see what the example looks like using the background image. Upload your file, and upload the graphic to the same folder (or directory) on your web server as the HTML file.
Important! Your file names must always be spelled exactly the same in your HTML file as they appear for the filename. File names are case sensitve in HTML! A file named BACK.GIF will not load in the web browser if the HTML file refers to it as back.gif, Back.gif, or back.jpg
Adding a Background ColorYou can specify a background color by using a hexcode, or numerical value that the browser displays as a color. We have a healthy hexcode color chart for reference, or you can download several useful color utilities from Tucows (browse the HTML Color Utilities section). Most HTML editors also include a utility for
Okay, so you've found a wonderful background color for your web page. You can also specify hexcode colors for your text, links, visited links, active links. And (isn't HTML cool!) you can specify both a background gif and a background color. This gives folks something to look at while your background gif loads.
<BODY BACKGROUND="back.gif" BGCOLOR="#FFCC99" TEXT="#000080" LINK="#FF0000" VLINK="#800000" ALINK="#800080"> BGCOLOR is the tag for background color, TEXT specifies a text color, Link is for links on a page, VLINK is for links that have been visited, and ALINK is for active links. The example page doesn't have any links, so these won't be visible on this particular page. You can view the cheat sheet and the example for this tutorial. The main thing to remember is that you want to have a lot of contrast between your background color and text, so that the text is legible. Some Things To Experiment WithNow that you understand how to create hexcodes and add backgrounds, try experimenting with different color combinations. Try creating a page that uses only shades of a single color, like blue. Try creating a holiday page using hexcode colors. Using the same page, create a "warm" version and a "cool" version, using hexcodes. Warm colors are reds, browns, oranges, and yellows. Cool colors are blues, grays, purples, and greens.Troubleshooting Problems With BackgroundsIf you're having trouble with your background or text colors, here are some things to check:
|