CodePen

HTML

            
              <ul class="list-style">
  <li><a href="">intro here</a></li>
  <li>seond bullet here</li>
  <li>more here</li>
</ul>

<ul class="bg-style">
  <li><a href="">intro here</a></li>
  <li>seond bullet here</li>
  <li>more here</li>
</ul>

            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              ul {
  width:250px;
  border:1px solid grey;
  margin:25px;
  padding:5px;
 }

li { /* common to all list items  */
  height:36px;
  margin-bottom:5px;
  line-height:36px;
}

ul.list-style li{
  padding:0;
  /*use a image of 36*36*/
  list-style-image:url(http://www.deloitte.com/assets/Dcom-India/Local%20Assets/Images/Thumbnails/Alumni%20logo%2036x36.jpg);
  list-style-position:inside;
  background:lightgrey;

}


ul.bg-style li{
  list-style:none;
  padding-left:40px;
  /*use a image of 36*36*/
  background-image:url(http://www.deloitte.com/assets/Dcom-India/Local%20Assets/Images/Thumbnails/Alumni%20logo%2036x36.jpg);
  background-repeat:no-repeat;
  background-color:NavajoWhite;;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................