CSS/Properties/list-style-image

From W3C Wiki
< CSS‎ | Properties
Revision as of 06:43, 19 March 2013 by Lreed (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

list-style-image

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

Description

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.


Values


  • none
    Specifies no marker image.


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


Example

Example A

[style.css]

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

[index.html]

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


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.