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, the used width and height are the inherent width and height.

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

<!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>

Here is another example where the source URL of the image is attached.

Example

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





Related articles