HTML Element Style How to - List bullet image: list-style-image vs background

Question

We would like to know how to list bullet image: list-style-image vs background.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
ul.basic {<!-- w  w  w  . j  a  va 2  s  .  c  o m-->
  list-style: none;
  list-style-image: url(http://placehold.it/20x20);
  margin: 0 0 0 0;
}

ul.basic li {
  margin: 1.00em 0 0 0;
  padding: 0 0 0 0;
}

ul.bg-img {
  list-style: none;
  margin: 0 0 0 0;
}

ul.bg-img li {
  background-image: url(http://placehold.it/20x5);
  background-repeat: no-repeat;
  background-position: left center;
  margin: 1.00em 0 0 -30px;
  padding: 0 0 0 30px;
}
</style>
</head>
<body>
  <h3>Using a list-style-image</h3>
  <ul class="basic">
    <li>Hello!</li>
    <li>Good-Bye!</li>
    <li>See you later!</li>
  </ul>
  <h3>Using a Background Image on li</h3>
  <ul class="bg-img">
    <li>Hello!</li>
    <li>Good-Bye!</li>
    <li>See you later!</li>
  </ul>
</body>
</html>

The code above is rendered as follows: