List-style-image

What is it?

CSS list-style-image property is used to put an image instead of the list item marker.

However, it is good to define always CSS list-style-type property. So that, it will be used when the image is not available to be shown.

CSS Syntax

list-style-image: none | url | initial | inherit;

Let's see an example:

<!DOCTYPE html>
<html>
  <head>
    <style>
       ul {
    list-style-image: url('/uploads/media/default/0001/01/03d3f916bd5c266dd5008d5c210478cc730437eb.png');
        }
    </style>
  </head>
   <body>

    <ul>
       <li>Appetizers</li>
       <li>Main Course</li>
       <li>Salads</li>
    </ul>

 </body>
</html>

Here the result is:



Property Values

Value Descriptions
none It means that there won't be any image shown. Instead of image, the list marker which is defined with list-style-type will be shown. It is the default value of this property.
url It is used to give the source url of the image which will be used as list item marker.
initial It makes the property use its default value.
inherit It inherits the property from its parents element.