Pictures used for decorative purposes

The recent culture change in web design to accessible design means that decorative elements in web pages should not be included as part of the XHTML code. Instead, they should be included in the style sheet attached to the page. This means that viewers of your page who are unable, or disinclined, to use the style sheet will 'see' the plain content of the page. It is relatively straightforward to include images for decorative purposes in your web page using CSS, however, for complex effects more skill is required.

Two style attributes specifically refer to images, these being: background-image and list-style-image.


This simply allows you to specify an image to be used to replace the bullet, or numeric marker in a list. For example, the following CSS:

li { list-style-image: url('images/smiley.gif'); }

results in the following effect:

  • Love
  • Peace
  • Harmony


This is the most flexible of uses of images for styling, but only in conjunction with other CSS attributes. The background-image attribute can be used on any element in XHTML. It is recommended to specify a background colour as well, for situations where the background image is unavailable. For example:

h2 {
  background-color: silver;
  background-image: url('silver.gif');

By default the image will be tiled to cover the space occupied by the element. However, you can specify how the image is repeated using background-repeat with values: no-repeat, repeat-x, repeat-y, e.g.:

background-repeat: no-repeat;

The background image can also be placed within the element. This applies whether the image is repeated or not. It allows the image to be centred (or other placements) on the object before repeating. E.g.:

background-position: 150px, 50%;

will place the (first) copy of the image starting 150pixels across the element and halfway down.

If you couple background images with the use of <div> tags for layout and positioning you get a very flexible mechanism for creating effective, image based designs. Of course, the images are ignored by screen-readers and any other technologies which ignore style sheets, but this is what would be expected. The end result is that the XHTML is 'clean' and only contains content which is important from the perspective of information content. The example of the use of background images shows how it can be used at many positions within a web page.

Golden Rule 4: Make sure your background images don't obscure the page content

A highly coloured image can cause the user difficulty when a piece of foreground text overlays a similar colour within the background image. This also applies when the foreground colour clashes with the colour in the background. For example, red text over a background with green elements. Apart from logo's and design artwork which are separated from text content, you should adjust the colour settings of your background image. For example: if you are using black, or a dark text colour, use a graphics program to increase the lightness of the image. This has the effect of providing a pale background, yet still retaining the image. Conversely, if you use a light text, you need a dark background. You would set a default background colour, but use image editing software to modify the lightness to make the image darker. This does not always work effectively, as some images do not respond well (visually) to lightening or darkening. The example page for background conflicts demonstrates this.

Valid XHTML 1.0! | Valid CSS! | WCAG Approved AA
Page design by: John P Scott - Hosting with: Netcetera