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:
<BODY background="blue.gif" bgcolor="#9999ff">
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
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