From W3C Wiki
Jump to: navigation, search


The list-style-image property sets the image that will be used as the list item marker.


Values <uri> | none | inherit
Initial value none
Applies to elements with 'display: list-item'
Inherited Yes

Point, Note

  • The size of the image is calculated from the following rules:
  1. If the image has an intrinsic width or height, then that intrinsic width/height becomes the image's used width/height.
  2. If the image's intrinsic width or height is given as a percentage, then that percentage is resolved against 1em.
  3. If the image has no intrinsic ratio and a ratio cannot be calculated from its width and height, then its intrinsic ratio is assumed to be 1:1.
  4. If the image has a width but no height, its height is calculated from the intrinsic ratio.
  5. If the image's height cannot be resolved from the rules above, then the image's height is assumed to be 1em.
  6. If the image has no intrinsic width, then its width is calculated from the resolved height and the intrinsic ratio.


  • none
    Specifies no marker image.

  • inherit
    Takes the same specified value as the property for the element's parent.


Example A


   list-style-image: uri('images/list.gif');


    <li>list-item 1</li>
    <li>list-item 2</li>
    <li>list-item 3</li>

Csslist2 list-style-image.png

Example B

[inline style]

 <li style="list-style-image: url('../images/yu_tbg.png'); "> the path can be FQ URL e.g., http:∕∕www.Domain.TLD/images/Image.gif

CSS Reference

The CSS specification defines the list-style-image property in 12.5.1 Lists.