list-style-image

Summary

This property sets the image that will be used as the list item marker. When the image is available, it will replace the marker set with the ‘list-style-type’ marker. That also means that if the image is not available, it will show the style specified by list-style-property

Overview table

Initial value: none
Applies to: elements with ‘display: list-item’
Inherited: Yes
Media: visual
Computed value: absolute URI or ‘none’
Animatable: No
CSS Object Model Property: listStyleImage

Syntax

list-style-image: inherit
list-style-image: none
list-style-image: url(path/to/image.png)

Values

none: Default. No image is specified.
url(path/to/image.png): Location of the image, where path/to/image.png is an absolute or relative URL. More details can be found at the css/functions/url() section.
inherit: Takes the same specified value as the property for the element’s parent. (Acts similarly to other uses of inherit in CSS.)

Examples

The following examples shows the different possible values you can use for the list-style-image property. It also contains an example to show what happened when an unavailable image is not provided and how to use ‘none’ to break the inheritance.

/* Using an absolute URI to specify an image */
.first-list {
    list-style-image: url(/docs/w/skins/webplatform/images/logo.svg);
}

/* Using a relative URI to specify an image */
.second-list {
    list-style-image: url(favicon.ico);
}

/* When providing an unavailable image, the marker used will be the one specified by the 'list-style-type' property */
.third-list {
    list-style-image: url(/docs/w/skins/webplatform/images/logo.svg);
}

/* Setting the value to none we are breaking the inheritance */
.third-list .third-list-inner-non-inherit {
    list-style-image: none;
}

/* When providing an unavailable image, the marker used will be the one specified by the 'list-style-type' property */
.fourth-list {
    list-style-image: url(http://wrong.url.used.com);
    list-style-type: disc;
}

View live example

Usage

 The property has limited positioning options for the background image, and in some circumstances doesn’t work at all in IE.

So it has become a far more common practice to simply set a background image on the list items.

Notes

Remarks

When the image is available, it replaces the marker that is set with the list-style-type marker. If the left margin of the list item is set to 0 using one of the margin properties, the list-item markers do not show.

Related specifications

CSS Lists and Counters Module Level 3: Working Draft
CSS Level 2 (Revision 1): Recommendation

Attributions

Mozilla Developer Network : Article
Microsoft Developer Network: [Windows Internet Explorer API reference Article]