Techniques for WCAG 2.0

On this page:

-

# C9: Using CSS to include decorative images

## Applicability

Any technology that can use CSS to include images.

This technique relates to:

- Success Criterion 1.1.1 (Non-text Content)
  - How to Meet 1.1.1 (Non-text Content)
  - Understanding Success Criterion 1.1.1 (Non-text Content)

## Description

The objective of this technique is to provide a mechanism to add purely decorative images and images used for visual formatting to Web content without requiring additional markup within the content. This makes it possible for assistive technologies to ignore the non-text content. Some user agents can ignore or turn off CSS at the user's request, so that background images included with CSS simply "disappear" and do not interfere with display settings such as enlarged fonts or high contrast settings.

Background images can be included with the following CSS properties:

- `background`,

- `background-image`,

- `content`, combined with the `:before` and `:after` pseudo-elements,

- `list-style-image`.

Note: This technique is not appropriate for any image that conveys information or provides functionality, or for any image primarily intended to create a specific sensory experience.

## Examples

### Example 1: Background image for an HTML page

The stylesheet for a Web page specifies a background image for the whole page.

Example Code:

     …
    <style type="text/css">
    body { background: #ffe url('/images/home-bg.jpg') repeat; }
    </style>
    </head>
    <body>
    …

### Example 2: Background image with CSS for image rollovers

The stylesheet for a Web page uses the CSS `background` property to create a decorative rollover effects when a user hovers the mouse pointer over a link.

Example Code:

    a:hover { background: #ffe url('/images/hover.gif') repeat; color: #000;
       text-decoration: none;
    }

### Example 3: Background images with CSS to create rounded corners on tabs or other elements

The styleseet for a Web page uses the CSS `background` property to create rounded corners on elements.

Example Code:

    …
    <style type="text/css">
     div#theComments { width:600px; }
     div.aComment { background: url('images/middle.gif') repeat-y left top;
     margin:0 0 30px 0; }
     div.aComment blockquote { background: url('images/top.gif') no-repeat left top;
     margin:0; padding:8px 16px; }
     div.aComment div.submitter { background:#fff url('images/bottom.gif') no-repeat left top;
     margin:0; padding-top:30px; }
    </style>
    </head>
    <body>
    <div id="theComments">
     <div class="aComment">
      <blockquote>
       <p>Hi John, I really like this technique and I'm gonna use it on my own Website!</p>
      </blockquote>
      <div class="submitter">
       <p class="cite"><a href="http://example.com/">anonymous coward</a> from Elbonia</p>
      </div>
     </div>
     <div class="aComment">
     …
     </div>
    </div>
    …

### Example 4: Image replacement used to enhance the visual appearance of a heading

In the following example, a decorative image is used to replace text within the heading element.

Example Code:

    <style type="text/css">
    h3#about {
    width: 480px;
    height: 34px;
    position: relative;
    }

    h3#about span {
    background: url(about.gif) no-repeat;
    position: absolute;
    width: 100%;
    height: 100%;
    }
    </style>
    ...
    <h3 id="about" title="About example.com"> <span></span>About example.com </h3>

## Resources

Resources are for information purposes only, no endorsement implied.

- The background property in the CSS 2.0 specification

- The HTML 4.01 specification states that the `background` attribute of the `body` element is deprecated

- Revised Image Replacement

- ImageReplacement - css-discuss

## Related Techniques

- F3: Failure of Success Criterion 1.1.1 due to using CSS to include images that convey important information

## Tests

### Procedure

1. Check for the presence of decorative images

2. Check that they are included with CSS

### Expected Results

- If #1 is true, then #2 is true.

- Top
- Contents
- Intro
- Previous: Technique C8
- Next: Technique C12