Background Images
The use of background images to "texture" pages became popular about the same time as animated GIFs of flashing bullets, spinning globes, exaggerated horizontal rule graphics and so called "hit counters". It was the Internet's "Age of the Leisure Suit".
They disappeared just as suddenly, and for good reason: they're tacky. I've seen pages so full of textures and flashing junk it made me want to reach for an air-sick bag. In today's Internet environment, these ugly "page warts" now indicate the work of a fledgling designer.
Remember: Just because a browser can display all those hideous features, doesn't mean they are appropriate in your design. If you want to experiment with them, go ahead -- just don't put them up on the web where anyone else can stumble across them. Trust me: A website shouldn't look like a bathroom in an 1850's bordello.
Most top websites use black text on white, simply because it makes reading comfortable. One of the best ways to get ideas for web page designs is to scan the pages of higher-class magazines. Magazine ads and article structures often lend themselves to website motifs.
Now that I've tried to talk you out of using tiled backgound images, here are some generalities applying to their use:
- Use tiled texture images sparingingly. Your full-page paisley background may render the page text completely unreadable, and land your site on the World's Worst Website list.
- Keep the images subtle -- they should not garner attention from the important content of the page.
- The year 2006 saw most sites using background textures drop them in favor of solid colors and broadband-oriented features like Flash compositions to attract the eye. Look these over for ideas:
- Apple Computer -- subtle striping in the header supports the main navigation tabs and reflects the OS X window motif.
- Wired Magazine (online) -- once a textured site, this design is Euro-style, not-so-subtle, but then this mag aims to be a shocker.
- Moller.com -- used to have a nice subtle grid background that fits this engineering technology site, but now has Flash navigators and images.
- Sometimes a solid color consistent with your design scheme's palette combined with a single simple image appropriately placed can be interesting:
- Waters Gulch Digital (shameless plug!) -- CSS was used here, but could have been done with HTML.
-- a simple zigzag stripe of a color within the site's scheme palette used as a background image for the body of the page.
Applying Backround Images
To apply a tiled background image to your entire HTML page, just add the "background-image" attribute to the <body> tag:
<body background="i/ugly_tile.gif">
<< Anti-Aliasing | Index | Fonts >>