The Use and Misuse of Background Graphics on Websites with The Computer Gal

The Computer Gal on Facebook
Ask to receive tips and handouts to your email.

There’s no getting around the fact that websites are two dimensional. And, yet, we don’t want our websites to feel flat and boring. So, we use graphical tricks to product a sense of 3 dimensions in 2-dimensional space. Background graphics are a very important tool for creating visual interest on a page, and yet, there is a fine line between background graphics that add interest and shape and background graphics that create confusion, instead.

The Difference between a Background Image and an Inserted Image
Whether a website image is an inserted image or a background image is not in how the image is created, it’s in how the image is coded. That means that any image can be used as either a background image or an inserted image. An inserted image is a page element with its own HTML tag: <img>. A background image is a property of another page element. For example, an image that is used as a background for a whole webpage is coded something like, <body backgroundimage=”ImageFileAddress.jpg”>. It is a property inside the <body> tag.

An inserted image takes up room on the page, based on its size. Background images tile to fill a space*, whether it’s the whole web page or a table or a layer. If the image is larger than the space, it cuts off. If it’s smaller than the page, it repeats until there is no space left. For an example, click thecomputergal website link at the bottom of the page. The green stripes are created with a very small background image. You can see the background image for yourself, by right clicking on the background area and saving the background onto your computer.

The Choice between Background and Inserted Images
One factor in the decision whether images should be inserted or background images is whether the image provides content or just “look and feel.” For example, a photo of a house on a real estate site is actual content because it delivers information about the house for sale. Conversely, the light green stripes on thecomputergal website only provide color and “dimension” to the page. Background images are also commonly used for borders, textured backgrounds, gradients and curves.

Inserted images can have “alt” tags which makes the images a source of text information to the search engines and to screen readers for people with visual disabilities. Background images don’t have alt tags, but they really don’t need them because they aren’t part of the page content.

When Background Images Create Confusion (Dementia)
If the main purpose of a background image is to provide “look and feel,” then the purpose of the background images isn’t to draw attention to themselves, but to help focus the viewer’s attention on the message, or content, parts of the webpage. That concept is easy to forget, as web developers try to show how clever they are with background images.

An example of a background image that added a sense of “dementia” to a web page was when a local site took a black-and-white aerial photo of the Missoula area and used it as a background image for his whole front page. The idea seemed very clever, as the image loaded, but then when the rest of the page loaded, the page content covered the aerial photo making it a confusion of lines that peeped out here and there behind various content areas of the page. The lines of the image pulled the viewer’s eyes away from the content in trying to find a concept on the page. The problem was that the photo was trying to scream its own message behind the content areas.

A similar case is where someone takes their logo or a product photo and tiles it, as a background image, on their web pages. A logo has its own message. It should be an inserted image. Otherwise, the lines in the logo or product confuse the message instead of supporting it. Instead, use a background texture that supports your message or the personality of your pages. For example, a western clothing store could use a leather texture on the page, instead of a tiling cowboy hat.

Taking the Concept a Step Further
With Cascading Style Sheets (CSS), background images can be set not to tile. With the concept of background images as “supporting” images, even images that aren’t just abstract can be used as backgrounds. On the CSS Zen Garden website, the water lily image at the top left and the tree image at the bottom left of the page are coded as background images, but they don’t tile. While these are very attractive images, they demonstrate the concept of a background image because they set the tone, instead of being content in themselves.
http://csszengarden.com

This article is based on a discussion topic from the Web Development with Dreamweaver course at Dickinson Lifelong Learning Center in Missoula, Montana