You are here:
- Manual
- Development
- Images
- Background images
Images and alternate text: Background images
Please use CSS (Cascading Style Sheets) when inserting background images, rather than a deprecated and invalid background attribute in the HTML.
Decorative images via CSS
Decorative images must be inserted by means of CSS wherever possible. On the other hand, informative images – images with an essential message or function – should be inserted by means of HTML, using for instance the img (image) element.
A decorative background image, inserted through CSS
body { background-image: url(/images/background.jpg); }Example of an informative image with alternate text (HTML)
<img src="/images/belgium.gif"
alt="Are you travelling to Belgium this summer?">Decorative images should be inserted through CSS wherever possible. Informative images should be inserted through HTML.
Guideline R-pd.7.6
"Use style sheets to control layout and presentation"
No alternate text for background images
An alternate text can be created for the img element; this is not possible for images inserted through CSS. Because CSS support by browsers is optional, the web page must also be readable and usable without CSS. If essential images are inserted through CSS, important information can be lost if a browser does not support CSS.
"Organise documents so they may be read without style sheets. For example, when an HTML document is rendered without associated style sheets, it must still be possible to read the document."
CSS Image Replacement
Currently, CSS Image Replacement is a very popular technique. It consists of hiding regular text in an HTML document and presenting a background text instead. A major advantage of this technique is that the presentation of the information can be arranged from a single location: the CSS file.
If browser support for CSS is lacking, the regular text is displayed. Thus, this technique precludes the problem of missing alternate text for background images. However, it raises a new problem: if CSS is supported, but images are not, neither the image nor the normal text will be visible.
A definitive solution to this problem has not yet been found. Therefore, the use of CSS Image Replacement techniques applied to essential information is not being recommended.
Applying CSS Image Replacement techniques to essential information is not recommended.
Guideline R-pd.7.7
