B.60. list-style-image

This property lets you assign an image to be displayed, instead of a standard marker for list items. You can set this property for individual list items (li) if needed; however, the recommended method for specifying an image for all elements in a list is to apply the property to the list element (ol, ul, etc.) and let the list items inherit it.

You should usually specify a list-style-type value with your list-style-image; the browser will use the list-style-type as a fallback if the image fails to load.

Be aware of the fact that this property is inherited by descendant elements, including nested lists. See the discussion in the example for the list-style property to learn how to avoid this pitfall.

Inherited: Yes

See also: Section B.59list-style, Section B.62list-style-type

B.60.1. Value

A CSS URL (using the url() wrapper), or none.

Initial value: none

B.60.2. Compatibility

CSS Version: 1

Works in all CSS-compatible browsers, with the notable exception of Netscape 4.

B.60.3. Example

These style rules will set all unordered list (ul) elements to display an image as a marker (with square as the fallback list-style-type). The second rule specifically sets the list-style-image and list-style-type of ordered list elements (ol) to prevent them from inheriting the unordered list properties if they are nested inside one.

ul {
  list-style-image: url(/images/bullet.gif);
  list-style-type: square;
}
ol {
  list-style-image: none;
  list-style-type: decimal;
}