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;
}
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
list-style-image
Related pages
- CSSStyleDeclarationCSSStyleDeclaration
- currentStylecurrentStyle
- runtimeStyleruntimeStyle
- stylestyle
Attributions
Mozilla Developer Network : Article
Microsoft Developer Network: [Windows Internet Explorer API reference Article]