CSS list-style-image Property

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

If the image has an inherent width and height, they will be used as width and height. If the image has an inherent ratio and an inherent height/width, they will be used as width and height. The used value of the missing dimension will be calculated from from the provided ratio and dimension.If the image has an inherent ratio and either an inherent height/width, the used height/width will be the same as the provided inherent height/width. The used value of the missing dimension will be calculated from from the provided ratio and dimension.

The list-style-image property is applied to list items and elements with display set to "list-item". By default, this includes <li> elements. It also can be set on the parent elements: <ol> or <ul>.

The list-style-type property will be used when the image is not available to be shown.

Initial Value none
Applies to List items.
Inherited Yes.
Animatable No.
Version CSS1
DOM Syntax object.style.listStyleImage = "url("image.jpg")";

Syntax

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

Example of the list-style-image property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      ul {
        list-style-image: none;
      }
    </style>
  </head>
  <body>
    <h2>List-style-image property example</h2>
    <ul>
      <li>List item 1</li>
      <li>List item 2</li>
      <li>List item 3</li>
    </ul>
  </body>
</html>

Result

CSS list-style-image Property

Example of the list-style-image property with an attached source URL of the image:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      ul {
        list-style-image: url("/uploads/media/default/0001/01/03d3f916bd5c266dd5008d5c210478cc730437eb.png");
      }
    </style>
  </head>
  <body>
    <h2>List-style-image property example</h2>
    <ul>
      <li>List item 1</li>
      <li>List item 2</li>
      <li>List item 3</li>
    </ul>
  </body>
</html>

Values

Value Description Play it
none 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. Play it »
url Is used to give the source url of the image which will be used as list item marker. Play it »
initial Makes the property use its default value. Play it »
inherit Inherits the property from its parents element.

Browser support

chrome edge firefox safari opera
1.0+ 12.0+ 1.0+ 1.0+ 7.0+

Practice Your Knowledge

What is the function of the 'list-style-image' property in CSS?

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?