Background Images

Welcome to our free Web Accessibility and Section 508 tutorial. This tutorial is based on Webucator's Web Accessibility and Section 508 Training for Experienced Web Designers course.

Contact Us or call 1-877-932-8228
Background Images

Background Images

  • Do not convey information in background images
  • If you must use background images that convey information, make sure the information is available through another avenue on the site

The Texas School for the Blind and Visually Impaired uses style sheets for color and font effects as well as positioning. Enabled, it appears as follows:TSBVI web site

Then with style sheets turned off, the page looks very different; but it is still readable with style sheets disabled. Information is not lost. with CSS disabled

The large image containing the words "Texas School for the Blind and Visually Impaired" whose alt-text is "Link to Adaptive Technology" (tsk tsk, it shouldn't include "link to") doesn't show in the screen shot with CSS disabled, but it is there farther down the page. However the image on the left with white letters on a blue background, "adaptive technology," is gone. This is because that image is a CSS background image with code like this in the TSBVI style sheet.

Code Sample:

StyleSheets/Demos/Code07.xml {
	background: url( #f0ffff fixed no-repeat left top;

By the way, the Web Accessibility Toolbar provides a method of looking at the style sheets. Use CSS > Show Style Sheet(s) which opens a new window. Then in that window you can either open each (if there is more than one) CSS file or display it in the browser.

The CSS code for the background image specifies the URL of the image, that it is fixed (non-scrolling), non-repeating, and that is to be positioned at the top left on a light bluish (#f0ffff) background.

The information in this or any other background image is not available to screen readers. One could argue that the title element of the page ("TSBVI Technology Home Page") gives essentially the same information.

Here is another instance of background images. The following is a screen shot of part of the home page. Screen shot of part of home page

Now here is the same section of the page with CSS images removed (the Toolbar again, Images > Remove CSS Images). The annualcreditreport page with css images removed

And with removal of the background images, important information is missing: "Request your free annual credit report. It's Quick Easy and Secure. Start here to view your Free Credit Report now." This is being fixed as this section of the Web Accessibility Tutorial is being revised.

The bottom line on background images is, Don't convey information in background images; but if you do, make sure that information is available through another avenue.


This tutorial is based on Webucator's Web Accessibility and Section 508 Training for Experienced Web Designers Course. We also offer many other Web Accessibility Training courses. Sign up today to get help from a live instructor.