HOME - Desire2Learn - Ning - Mythology & Folklore - World Literature - Indian Epics

Install | Week 2: Text & Links | Fonts | Backgrounds | Links | Links Help | Email | Week 3: Images | Images | Image Help | Labs | Junk Word Code

Mozilla Composer: Background Colors and Background Images

The following page provides information for those of you who want to use background colors and background images on your webpages.


Background Colors

Background colors are easy to add to pages, but you must also adjust the text color, link text color AND visited link text color if you are using a background color on the webpage. If you are using a dark background, the text colors should probably be white or yellow if you want them to show up properly.

Changing the Background Color and Text Color in Composer

STEP ONE . From the Format menu, choose the Page Colors and Background option.

STEP TWO . You will see that you can change the Background Color, plus the Text Colors. You MUST change the Normal Text, Link Text, and Visited Link text to be compatible with your background color (you do not need to worry about the Active Link Text). To change the color, just click on the little rectangle of color and the Color Picker will pop up.

STEP THREE . You can choose one of the available colors or, if you want to use a color that is not displayed, you can enter the HTML code for a different color.

There are many websites online that will help you select from literally millions of colors, and give you the HTML code you need. For example, the Hex Color Picker lets you cruise around a color wheel - you can then right-mouse click when you are done (don't choose an option - just right-mouse click), and that will freeze the selection so you can copy-and-paste the Hex code (#xxxxxx) from the webpage into your Composer Color Picker.

4. Make sure you adjust the text color AND link text color AND visited link text color. If you do not adjust the text colors, including the link text colors, they will be invisible on a dark background.


Background Images

Background Image. Background images are usually very distracting, making it hard to read the text on the page. However, you might want to use a background image for the coverpage of your project, or you might want to use the background image inside a specific region of your page (to do that, use a background image for the page, but then create a table with a solid colored background which will contain all your text and images).

Background Image for Color/Texture. Often when you are looking at a background color, you are really looking at a background image that is being used to create both color and texture on the page. This is usually a tiny block image that is tiled over and over again on the page so that it creates a seamless background color/texture effect. There are many libraries of background color-texture swatches online (for example, Absolute Backgrounds, and many others listed in this Yahoo Directory). You can also create your own color and texture combinations using an image editing program like Photoshop.

CAUTION: Read this important message! When you are working with a background image, there is always the possibility that the image will not work exactly as expected. So you must do a background color first, and SAVE THE PAGE. Then, after you do the background color and text colors and save the page, then you can experiment with the background image. By doing the background color and text colors first, you will be safe even if you have problems with your background image. Also, you are less likely to have trouble with your background image if you have saved the file first, before adding the background image.

Using a Background Image in Composer

STEP ONE . Find the image you want to use for your background, and save it to the folder where you are keeping your webpages.

STEP TWO. Open Composer and create a page that will publish your background image as an image to your webspace. To do this, create a new page, Insert the image (it will look kind of strange just being displayed on the page, but don't worry), save the page with the name upload.html and then click the Publish icon. Make sure the Include Images box is checked:

You should see that both the page and the image file were published.

STEP THREE . Now you are ready to add this image as a background image to your webpage. It is essential that you have already created the webpage, and saved it with a filename in your webpage folder.

STEP FOUR . Open the webpage that you want to add the background image to. Make sure you have already defined a Background Color that is more or less like the background image you have chosen, and that you have chosen the Text Color, Link Text Color and Visited Link Text Color that are compatible with this background (see instructions above).

STEP FIVE . From the Format menu, choose the Page Colors and Background option. Click on the Choose File button for the background image, browse to your webpage folder, and select the image you want to use. When you are done, you should see ONLY the filename displayed, and the box "URL is relative to page location."

If the "URL" box is grayed out and you cannot check it, your background image will not work! It will display correctly on your computer, but not on anybody else's computer. If you see this, you need to start the process over again, making absolutely sure that you have saved both the webpage file and the image file in the same folder on your computer. Close down Composer and try again.

STEP SIX . Save the file and Publish. Only the webpage will be published, but you have already published the image, so it should work! Make sure you check the page on your own computer AND on somebody else's computer so that you can be sure the background image is working the way you want.


© Copyrighted by Laura Gibbs. Kaleidoscope images created with Kaleidoscope Painter. Last updated: August 20, 2008 9:46 AM .