For the new web designer, background images may just mean a small tiled gif that repeats in the body tag. Little known with a newbie, at least with me when I broke into the web design world, is just how creative one can be with this handy CSS property; background-images: url(cool-pic.jpg);.

Whether designing for print or for web, the “problem” is precision. An ink is laid down precisely on paper, the surface is manufactured to either absorb a greater quantity or lesser dependent on non-coated or coated. In Web, one color declaration will be displayed the same for the amount of pixel square area specified. Now this is a good thing. We depend on this technology to accurately represent what we want, but the problem is that it doesn’t represent the comfortable, worn, uneven and discolored world that we live in. Designers aren’t responsible to replicate that (would be wrong in a Bauhaus theme for instance) but in some settings it is a real plus. What a relief, an ease on the eye to see worn edges, subtle changes in color, an uneventful entry box celebrated.

Another useful aspect of background images is that they don’t take up extra pixel space. In creating good vertical rhythm for instance, a border will bump your alignment off per how large the border is. Not so with a background image, just create a tiny gif and repeat the x distance.

Notice the background for this site. The pattern repeats in an uneventful gray yet one gets a sense of unevenness, possibly even fabric. In fact, your reading this article on this particular page, most every image making up this page is a background image.

The challenge is to keep the k size manageable so your page loads quickly, but that’s part of what makes a well designed site a great site too. So have fun and get creative.