Background images are over rated!

Background images are over rated

Many web pages are lacking in real content to begin with (perhaps you even think this one is). So, when someone actually puts forth the effort to create a well written page why would they want to obscure their hard work with a background image that makes text hard to read.

True, we have a background image on the home page here at pessimistic.com. (The image is shown at right.) But at least it's quite subdued.

Our text intensive pages aren't obscured by any background images. After all, we want people to come and visit our pages for what we write, not what we display behind the words.

Adopt the style used by most books, magazines and newspapers: a clean background. This puts the focus on the text and makes it easier to read.

We've created 13 sample backgrounds in the tables below. Some are images, some are merely colors. Scroll down and take a look.

Example # 1:

Here we have black text on a gray background - the default for a simple page.

Not so long ago, gray used to be the default background color for web pages - if you didn't specify some other color, you got gray. This is boring, and it gives pages that text-file-like "we didn't care enough to give you anything but the default" look. However, it is quite easy on the eyes. The text is clear and readable without being too contrasty or harsh.

Example # 2:

Here we have black text on a "colorful" background - is this an improvement?

We designed the heinous image in example # 2 specifically to obscure black text. If you doubt that we really put text there, then try dragging through the table with your left mouse button held down - this will highlight the text and make it visible. Obviously, this is an extreme example, but we feel that it proves our point - some background images just go too far.

Example # 3:

Here we have black text on an orangish background - is this an improvement?
What about bold text!
Or larger text?

orange

Example # 4:

Here we have black text on a white background - the paper look.

white paper

Example # 5:

Here we have white text on a black background.
Just the opposite of the "paper" color scheme.

black with white text

Example # 6:

We use this color a lot here.

pessimistic standard [text color = #C0C0C0 or rgb(192, 192, 192)]

Example # 7:

Here we have black text on a "colorful" background - is this an improvement?

Highly embossed background image. (It's a picture of one of my pet mice).

Example # 8:

Here we have black text on a "colorful" background - is this an improvement?

Medium embossed background image.

Example # 9:

Here we have black text on a "colorful" background - is this an improvement?

Lightly embossed background image. In example # 9, the background is even more subdued. We're getting close to that default gray background used in example # 1. It's not too hard to read the text, but it is much more difficult to make out the picture. Why even have the background image if you can't tell what it is? Having to analyize the picture draws focus away from your text. Maybe some people will what to read your web page in hopes that it hints at the contents of the background image??? Of course others may be frightened by not knowing what they are looking at. "Perhaps it's a close up of someone's naughty bits! Maybe it's only visable at a distance - so when my boss comes round the corner, he'll see this really horendus image that I can't quite make out. Better close this page right away..."

Example # 9A - or whatever:

This little girl is [was] a pet of mine. I used to have several fancy mice, but they've all passed on to rodent heaven. Mice are not long-lived creatures. 18-24 months is typical mouse life-expectancy in captivity.

This image was captured using a very old B&W video camera.

Isn't something simple like this more effective? [background color = #05C6FE or rgb(5, 198, 254)]

Example # 10:

Here we have black text on a "colorful" background - is this an improvement?

Why are animated background images supported?

Example # 11:

Here we have black text on a "colorful" background - is this an improvement?

Why are animated background images supported?

Example # 12:

Here we have black text on a "colorful" background - is this an improvement?

Why are animated background images supported?

Example # 13:

Safe Haven for your text.