Skip to: content, navigation

by Tommy Olsson and Paul O’Brien

list-style-image (CSS property)

Browser support full matrix
IE5.5+ FF1+ Saf1.3+ Op9.2+
Buggy Full Full Full
Spec
Inherited Initial Version
Yes none CSS1

Example

This style rule assigns an image as the list marker for all items in the list with ID "links":

#links li {
  list-style-image:
  ➥    url("/images/link.png");
}

Try it yourself!View all demos

Description

This property specifies the image to use as a list marker for an item in a list (an element whose display property has the value list-item). If the specified image is available, it will replace any marker specified by the list-style-type property.

The exact position of the list marker image can’t be specified beyond what the list-style-position property allows.1

Value

If the property value is specified as none, no list marker image will be used. Instead, the list-style-type property will control what type of list marker—if any—will be rendered.

If the value is specified as a URI using the url() functional notation, the image at that URI will be used as the list marker if it’s available.

Compatibility

IE5.5Buggy
6.0Buggy
7.0Buggy
Firefox1.0Full
1.5Full
2.0Full
Safari1.3Full
2.0Full
3.0Full
Opera9.2Full
9.5Full

In Internet Explorer for Windows versions up to and including 7, a floated list item will not display any list marker image.

Internet Explorer for Windows versions up to and including 7 don’t support the value inherit.

Footnotes

1 It has become common practice, however, to apply a background image to the list items in order to gain precise control over list item marker image positioning.

User-contributed notes

ID:
#4
Date:
Sat, 26 Jul 2008 00:02:25 GMT
Contributed by:
gomedia
Status:
This note has not yet been confirmed for accuracy and relevance.

Internet Explorer for Windows, doesn't seem to display any list marker image if the <ul> is floated OR absolutely positioned.

Internet Explorer DOES display marker image if the positon is set to inside.

Add a note

To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.

Related Products

The Principles of Beautiful Web Design

Best Seller!

You don’t need to go to Art School to design great looking web sites!

Book Cover: The Principles of Beautiful Web Design

Download the FREE sample chapters