1. Technology

Bringing Backgrounds to the Foreground

How to Add Background Images and Colors to Your Web Pages


Why Change the Background?

When you create a Web page, it is fairly simple to just put the text on the page and you're done. But did you know that if you don't define a background color or image, your customer's browser will choose one for you. Most modern browsers default to white (#ffffff), as the background color, but not all older browsers do. In fact, for many, the default color is grey (#cccccc).

Paste the following into your HTML editor, and see how it looks:

<p style="background-color : #cccccc;">
 How would your pages look if the background color was grey, instead of white? Many pages look really bad. Especially when images have been made transparent with a white background - you get a halo effect around them. Or in some cases, you'll just see a box of white around the image - because the designer didn't use transparency.

Background Colors

The most common way to change the background color is to use the bgcolor attribute of the body tag. For example:

<body bgcolor="##ffff99">

That body tag would result in a page with a light yellow background color.

But the bgcolor attribute of the body tag has been deprecated in HTML 4.0 and XHTML. What this means is that it has been removed from the standard in favor of Cascading Style Sheets. But it is just as easy to change the background color of a page using CSS as it is with HTML. For example:

body {
 background-color : #ffffff;

This tells the document (or documents) associated with this style to have a white background color for the body.

Background Images

If you want to dress up your Web page, you might want to do more than just change the background color. You can use an image as a repeating background image. Or, using CSS, create a watermark like effect. Using standard HTML, you can define a background image like this:

<body background="/library/graphics/bg-grid.gif">

Note: Netscape 4 will not display a background image using this style.

As with the bgcolor attribute, the background attribute is deprecated in HTML 4.0 and XHTML. But again, it is easy to use CSS to add background images to your Web pages. For example:

body {
 background-image : url(../graphics/bg-grid.gif)

The article, Stylish Backgrounds, I discuss CSS backgrounds in more detail.

Background Tips to Keep In Mind

There are several things you should remember when using background images and colors:

  • Be aware of the colors you choose.
    Some of your customers may be color-blind. And some colors just don't look good together or are hard to read.

  • Dark backgrounds can be hard to do effectively.
    Black may be a popular color for Web pages, but it's also really easy to make a black backgrounded Web page look ugly or amateurish.

  • If you use a background image, be sure to set the background color as well.
    Images take longer to load than HTML and stylesheets, and while your page might look beautiful with the image, it could look awful before it downloads.

  • Background images can make the page hard to read.
    If your background image is busy or has a lot of common colors with the text color, it can make the text hard to read.

Learn more about color and Web design with my color links.

Previous Features

Related Video
Add a Background Image to a Webpage

©2014 About.com. All rights reserved.