List Images

January 31st, 2009
By: Cory Mathews

In CSS List Images are such a simple topic that I have seen overlooked over and over. There is not much to it at all. Just one line of css.

Example

ul { list-style-image:url(picName.jpg); }

Done in one short line. This will simply make every un-ordered list have an image in place of the dot. So then an un-ordered List in XHTML such as:

<ul>
	<li>List Item 1</li>
	<li>List Item 1</li>
	<li>List Item 1</li>
</ul>

would look like
imglist

(Note my list image is smile)

The only problem with this is that every unordered list will use this image. To fix this we will give the unordered list a class name this way we get to choose which list will show the image and which will use the default dot.

CSS:

ul.imgList { list-style-image:url(picName.jpg); }

XHTML

<ul class="imgList">
    <li>List Item 1</li>
    <li>List Item 1</li>
    <li>List Item 1</li>
  </ul>