CSc 050: Adding Background Patterns to Web Pages

CSc 050: Background Patterns

If you look closely at this web page, you'll notice that the streaked blue background is not just a single color, but is actually an image that has been used as "wallpaper" of sorts. This single small image has been duplicated many times to get this wallpaper effect, and it is known as using a background pattern. It is an alternative to using bgcolor, which only provides a single solid background color.

Using the background attribute

A background pattern is achieved with yet another addition to the <BODY> tag -- called background. All you need is a picture (in either .gif or .jpg format) with which you want to create the pattern. I have a picture called "blue.gif" which I used to provide the background you are seeing now. My <BODY> tag looks like this:

The background attribute uses the image I have to create the wallpaper effect. Notice that I have also included the bgcolor attribute. Though not necessary, I did this so that just in case a user is loading this page with images off, or in case the background image cannot be loaded for some other reason, the color of #9999ff (kind of a light blue) will be used instead. And the page will look somewhat similar to what I intended. (This is also a good idea since most people change their text color to be readable with a particular background pattern, and an unloaded pattern may result in a hard-to-read text color.)

Getting your own background patterns

Many web pages contain archives of background patterns which you can take for your own pages at no charge. Here are just a few sites that have many:

Julianne's Background Textures Neatly divided up by color.
The Background Sampler Netscape's own.

When you find a background image you like, you can just copy it to your computer the same way you copy any image off the web (for many browsers, this means you point at the image, right-click, and save the image using the menu which appears.)

You can actually turn your own images into background wallpaper too! See your instructor for further details. Make your web pages even better by adding a background pattern!

Back to Tutorial Index