This page is Ready to Use

Notice: The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.

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(http://docs.webplatform.org/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(http://docs.webplatform.org/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

See also

Related articles

Generated and Replaced Content

Related pages

Attributions