How to Display Bullet Images with CSS

May 10, 2012, by admin

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

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

And it creates your Basic Unordered List.
In order to display a custom bullet image, we add this to our CSS:

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 correctly. That is, they align at the bottom and not vertically centered as one would anticipate. 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:

Note that I’m also increasing the line height, which may or may not be crucial, 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:

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

The ‘no-repeat’ tells our image to do accurately 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 absolutely Styled List Using Bullet Images, just not achieved quite the way you might have first anticipated.