html5 Site Icon CSS3 Site Icon CSS Site Icon

CSS 1/2 Reference

CSS list-style-image property

Definition

The CSS list-style-image property allows us to specify an image to use for the list-item marker.

Applies To

All elements with 'display: list-item;'.

Property Values

Use in association with the list-style-type CSS Property in case the image cannot be found.

none - The list-item marker is resolved from the list-style-type CSS property. This defaults to decimal for ordered lists and disc for unordered lists.

inherit - The list-style-image properties are inherited from the parent element.

url - The image is retrieved from the url path specified.

Default Value

Default value is set to none.

Inheritance

The list-style-image property is inherited from the parent element if no value is applied to the current element.

Browser Anomalies

IE5, IE6 and IE7 do not support the inherit property value.
IE8 does with a valid !DOCTYPE.
IE9+ supports the inherit property value.

Example



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<!-- Our HTML/CSS for the CSS list-style-image property follows -->
<html  xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS 1/2 Reference - CSS list-style-image Property</title>

<!-- Valid values for CSS list-style-image Property are:

     none, inherit and url.

--> 

<style type="text/css">

ul { 
  list-style-image: url(http://htmldoctor.info/images/bullet_purple.png);
  list-style-type: circle;
}

#list { 
  list-style-image: url(http://htmldoctor.info/images/bullet2_purple.png);
  list-style-type: circle;
}

</style>

</head>
<body>
<h1>The CSS list-style-image Property</h1>
<h2>Image for list-item will be found</h2>
<ul>
  <li>Tin of Tomatoes</li>
  <li>Bacon</li>
  <li>Loaf of Bread</li>
  <li>Mushrooms</li>
</ul>
<h2>Image for list-item will NOT be found, so use list style type</h2>
<ul id="list">
  <li>Tin of Tomatoes</li>
  <li>Bacon</li>
  <li>Loaf of Bread</li>
  <li>Mushrooms</li>
</ul>
</body>
</html>

How It Looks

The results of using the list-style-image property with the values above will look something like the following:

notepad
CSS list-style    << Prev          Next >>   CSS list-style-position

go to home page Homepage go to top of page Top

CSS properties

The complete set of visual CSS properties from the latest 2.1 Specification.

Click the links for more information on individual properties and their values.