The following are all links to take you to examples of various types of backgrounds.

Background Samples Directory

Examples of what
NOT to do:

Distracting #1
Modified #1a
Distracting #2
Distracting #3
Distracting #4

Now for some
good examples:

Plain Colors

Off White
Dark Lavender

Samples of
216 safe colors

Graphic Patterns

Paper Types

White Parchment
Tan Parchment
Bumpy White
Pebbled White
Legal Pad
Grid Paper
Geometric Edge

Miscellaneous Types

Lace-like #2
Green Marble
Purple Granite
Embossed Logo
Painted Design
Cotton Balls

Smile face

As you can see from the above samples, almost anything can be used as a background! We have a huge library of stock backgrounds. We also have the ability to create custom backgrounds for your site.

Backgrounds, the good, the bad and the ugly.

Backgrounds are one of the more important aspects in the overall design and feel of a webpage, unfortunately they are often overlooked or misused. This section will attempt to illustrate some examples of both good and not so good backgrounds for webpages.

Webpage backgrounds may be divided into two broad categories:

  • Plain colored. These are achieved through the use of HTML (Hypertext Markup Language) tags within your webpage coding.

  • Graphic. These are graphics which are designed to seamlessly "tile" into the background of a web page. They can be anything from a simple texture, to much more complex designs.

The background on this page is an example of a good custom designed graphic background. The grey textured section on the left is used to delineate a directory section, which is a list of hypertext links (underlined clickable links). They will take you to samples of various styles of backgrounds. The white section to the right contains the main body of text for this section. This style of background helps to visually separate the two sections for a very clean presentation and an easy to navigate Website. A custom background of this type adds, on average, between 1/2 to 1 hour graphics time to the price of a Website.

We will use a "standard page" in all of the samples to help us illustrate the suitability of various background types. This "sample page" contains samples of both standard HTML text, in four sizes, as well as graphic objects to help illustrate the interaction between the content of a page and its background. Please be aware of the two navigation buttons at the bottom of each sample page. You may quickly go from sample to sample within a group of background types by clicking on the "Next Sample" button. At the end of each group of samples there will only be one button, "Return to Background Directory". This will return you to this page and allow you to choose the next sample group you would like to see.

While you are looking at these various samples, please be aware of the relationships between the background and the following:

  • Color of text versus background color. Text can be very difficult to read if the colors are too close to each other. You may use different colors of text to help make it more readable. This was covered in the previous section on Text on The Web.

  • Size of text. Small text can be very difficult to read on a contrasty or "busy" background.

  • The way that graphic buttons or banners tend to stand out from the background, or recede into it.

  • The overall feeling that a particular background contributes to the page and it's contents.

We will begin by pointing out some examples of what not to do in the choice of backgrounds. The links to the distracting samples, to your left, illustrate quite graphically some of the things pointed out in the above list. Of particular interest is the link titled "Modified #1a", this illustrates how a poor background may often be modified to become acceptable. We could go on forever with bad examples, but as you browse the Web you will find too many examples all by yourself. You will also find examples of pleasing backgrounds, if you really like a background, bookmark it so we may take a look at it and help you to do something similar.

Now for the good examples, you will find many examples of good backgrounds in the list of links to the left. As above, we have broken these down into major categories, simple colored backgrounds and more complex graphic backgrounds. These graphic types are then broken down into two more subgroups: Paper type backgrounds (which work very well on almost any type of website), and miscellaneous graphic types (which could be anything from a marble texture to clouds in a blue sky).

Again, while you are looking at these various samples, please be aware of the relationships as outlined in the above list.

Finally, as you go through the rest of this tutorial, and the rest of our website, you will see many examples of good combinations of all of the above elements. Try to be aware of what elements make a webpage pleasing to you, and make note of these for use in your own pages. The World Wide Web is full of both good and bad designs - some of the best homework for you to do, prior to working on the concept of your own design, is to spend some time on the Web seeing what others have done... "The good, the bad and the ugly".

Remember, the World Wide Web is a completely different media than anything that has come before. Techniques that work well on printed materials very often give a poor presentation on the Web! Most traditional advertising and design studios are still using the older techiques they have been trained in. The WWW requires all of the traditional design skills needed in the past, plus an arsenal of completely new techniques and skills as well as a clear cross-platform/browser awareness.

Our media is the World Wide Web, we have the training and the tools to help you design and execute the best possible presentation for this wonderful new media!

Back to Web FAQ's | Forward to Graphics |