Background image as list bullet

| Web Design

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="http://www.facebook.com/kiffin.gish" target="_top">Facebook</a></li>
    <li style="background-image:url(/images/twitter.png)"><a href="http://twitter.com/kiffin" target="_top">Twitter</a></li>
    <li style="background-image:url(/images/googleplus.png)"><a href="http://www.google.com/+KiffinGish" target="_top">Google+</a></li>
    <li style="background-image:url(/images/linkedin.png)"><a href="http://www.linkedin.com/in/kiffin" target="_top">LinkedIn</a></li>
    <li style="background-image:url(/images/github.png)"><a href="http://github.com/kgish" target="_top">GitHub</a></li>
</ul>

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:

social-network-icons.png

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.

Random entries

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

Recent Assets

  • 2023-09-24-jong-tegen-oud-1.jpg
  • 2023-09-24-jong-tegen-oud-2.jpg
  • just-call-me-fred.png
  • foggy-morning.png
  • oma-2023-07-27.jpg
  • i-almost-died.png
  • chipping-from-twenty-meters.png
  • de-koepel.png
  • screenshot-www.udemy.com-2023.05.18-10_02_39.png
  • screenshot-www.golf.nl-2023.05.08-09_57_30.png
  • IMG-20230423-WA0000.jpg
  • me-and-my-radio-paradise-hat.png

Golf Handicap

Information

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 2498 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.