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.
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:
background-image
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.