Unordered List: Custom Bullets Using Background Image Example

List Example

Example Start

  • List item #1
  • List item #2
  • List item #3
  • List item #4
  • List item #5
  • List item #6

HTML Source Code


<ul class="backgroundbullet">
  <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>
</ul>

CSS Code


ul.backgroundbullet li {
  list-style-type: none;
  text-align: center left;
  background-image: url(../images/bullet-2.PNG);
  background-position: center left;
  background-repeat: no-repeat;
  padding: .3em 0 0 1.1em;
}