By using this site you agree to the use of cookies by Brugbart and our partners.

Learn more

CSS list-style-image Property

Example of how to use list-style-image, and workaround for IE. Reference on the CSS list-style-image property.

Edited: 2016-01-11 23:26

The CSS list-style-image property is used to apply a custom image in place of the normal bullets, or decimal numbers on lists, etc. You can change the normal list style, with the list-style-type property of CSS.

Its important that you specify the location of the image correctly, if for some reason your image doesn't show up, be sure to read about: Absolute and Relative paths

Possible values

The list-style-image property takes a URL value.

  • URL
  • none
  • inherit

Example

ol {
  list-style-image: url("/YourListMan.png");
}

Inherited? NO!

Working example

<!DOCTYPE html>
<html lang="en-US">

  <head>
    <title>Using your own images for list bullets example</title>
    <style type="text/css">
    * {margin:0;padding:0;} /* browser reset */
    ol {
     list-style-image: url("http://saek.brugbart.com/mappen-billeder/LIman.png");
     margin-left:22px;
    }
    </style>
  </head>

  <body>
    <article>
      <h1>How to use your own images for list bullets.</h1>
	  <ol>
	   <li>This Particular list item enjoys the company of The LI man. Do not piss him off!</li>
	   <li>This Particular list item enjoys the company of The LI man. Do not piss him off!</li>
	   <li>This Particular list item enjoys the company of The LI man. Do not piss him off!</li>
	   <li>This Particular list item enjoys the company of The LI man. Do not piss him off!</li>
	  </ol>

    </article>
  </body>

</html>

Brugbart Vision!

Browser support

Older versions of IE will not handle this property, which underlines the importance of recommending users to upgrade their browser. It should however be said, that this problem can be easily overcome, by first applying a background to the li elements them self, and then adding a right padding. Example below.

<!DOCTYPE html>
<html lang="en-US">

  <head>
    <title>Using your own images for list bullets example</title>
    <style type="text/css">
     * {margin:0;padding:0;} /* browser reset */
     ol {
      list-style-type:none;
     }
     li {
      background: url("http://saek.brugbart.com/mappen-billeder/LIman.png") no-repeat top left;
     }
     li span {
      padding-left: 22px;
     }
    </style>
  </head>

  <body>
    <article>
      <h1>How to use your own images for list bullets.</h1>
	  <ol>
	   <li><span>This Particular list item enjoys the company of The LI man. Do not piss him off!</span></li>
	   <li><span>This Particular list item enjoys the company of The LI man. Do not piss him off!</span></li>
	   <li><span>This Particular list item enjoys the company of The LI man. Do not piss him off!</span></li>
	   <li><span>This Particular list item enjoys the company of The LI man. Do not piss him off!</span></li>
	  </ol>

    </article>
  </body>

</html>

Brugbart Vision!