CSS CODE
ul
{
list-style-type: none;
padding: 0;
margin: 0;
}

li
{
background-image: url(arrow.gif);
background-repeat: no-repeat;
background-position: 0 .4em;
padding-left: .6em;
}


HTML CODE
<ul>
<li><a href="#">Milk</a></li>
<li><a href="#">Eggs</a></li>
<li><a href="#">Cheese</a></li>
<li><a href="#">Vegetables</a></li>
<li><a href="#">Fruit</a></li>
</ul>

http://css.maxdesign.com.au/listutorial/07.htm

To move the content away from the background image apply "padding-left" to the "LI" element. In this case "0.6em" has been used. As with vertical alignment, list padding will be determined by the size of your image.

Background images for bullets list

css, list

CSS