Background image as list bullet

| Web Design | 0 Comments

If you're like me then you've probably spent many a frustrating time trying to get those darn list-style-image: url(/images/bullet.gif) bullets aligned properly with the text. They are either too high or too far to the left and the inside list-style only messes things up even more.

The trick is to disable the css list-style attribute and use background images instead. I tag the ul-element with an id #list-images-background and put the following in my css file:

ul#list-images-background li {
    list-style: none; 
    background-repeat: no-repeat;
    background-position: 0 2px;
    padding-left: 24px;

An example is the list of my social media links on the right of my blog index page. Each list bullet image can be defined separately by using the background-image:url(/images/facebook.png) style. The markup code looks something like this:

<ul id="list-background-images">
    <li style="background-image:url(/images/facebook.png)"><a href="" target="_top">Facebook</a></li>
    <li style="background-image:url(/images/twitter.png)"><a href="" target="_top">Twitter</a></li>
    <li style="background-image:url(/images/googleplus.png)"><a href="" target="_top">Google+</a></li>
    <li style="background-image:url(/images/linkedin.png)"><a href="" target="_top">LinkedIn</a></li>
    <li style="background-image:url(/images/github.png)"><a href="" target="_top">GitHub</a></li>

The exact position of the image bullet can now be tweaked easily by adjusting the values of padding-left and background-position. After some minimal fine-tuning, here's what the list finally looks like:


The final result looks pretty professional, at least for someone like me. I invite all you so-called expert web designers out there to come up with something better.

Leave a comment

Random entries

Here are some random entries that you might be interested in:

Recent Assets

  • embedding-rust-in-nodejs-applications.png
  • finally-golf-again.jpg
  • corona-virus.png
  • long-walk.jpg
  • zonnepanelen.png
  • UC-0122abb7-1b51-422a-9e9b-56c5f86ee741.jpg
  • napolean-the-great.png
  • construct3.png
  • array-tally-ruby-2.7.png
  • ng-be-2019.png

Golf Handicap


This personal weblog was started way back on July 21, 2001 which means that it is 7-21-2001 old.

So far this blog contains no less than 2388 entries and as many as 1877 comments.

Important events

Graduated from Stanford 6-5-1979 ago.

Kiffin Rockwell was shot down and killed 9-23-1916 ago.

Believe it or not but I am 10-11-1957 young.

First met Thea in Balestrand, Norway 6-14-1980 ago.

Began well-balanced and healthy life style 1-8-2013 ago.

My father passed away 10-20-2000 ago.

My mother passed away 3-27-2018 ago.

Started Gishtech 04-25-2016 ago.