Additional CSS Resources

How to Use CSS to Display Bullet Images

March 27, 2010

With CSS, you have several options for styling list bullets. For example, disk, circle, square, etc. But what if you want to use a specific image for your bullet? With CSS, you can do just that.

The code for your basic, unordered list, is this:

<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
<li>List Item 5</li>
<li>List Item 6</li>

And it creates your Basic Unordered List.

In order to display a custom bullet image, we add this to our CSS:

ul {
         list-style-image: url(flower.gif);

Which gives us a list which looks like this. And you will notice a problem – my flower and my text just don’t line up properly. That is, they align at the bottom and not vertically centered as one would expect. I guess we could make the image smaller, but at that rate, it would have to be so small, nobody can see what it is, and we might as well use a standard circle. Or we can increase the font size, but that probably won’t work in relation to the rest of the design. Adding padding or margin would not help, either, as that adds to both the bullet image AND the text at the same rate, and neither would increasing the line height.

So while we wait and hope for some future development to address this issue, we have a way now to get this to look right. First, we get rid of our bullets altogether:

ul {
	list-style-type: none;
        line-height: 350%;

Note that I’m also increasing the line height, which may or may not be necessary, depending on your font size in relation to your image size. If you need line-height, you’ll just have to play around a bit until things look right. And then, we add a background image to our list:

li {
	background: url(flower.gif);

but if this is all we do, we end up with our flower across the entire line and with our text sitting on top of it. So we also need:

li {
	background: url(flower.gif) no-repeat center left;
	padding-left: 70px;

The ‘no-repeat’ tells our image to do exactly that, the ‘center left’ positions the image vertically centered and left aligned, and in order to get the text to move NEXT to the image, I’ve added some padding. And here you have a Perfectly Styled List Using Bullet Images, just not achieved quite the way you might have first expected.