CSS list-style-image Property

Markers are the bullets on a list with items.

The list-style-image property uses an image as marker.

The image marker displays as is, and cannot be resized.

Example

#

A list with list-style-image set to a leaf icon.

  • Vincent Van Gogh
  • Henri Matisse
  • Paul Gauguin
<ul style="list-style-image: url('/img/css/leaf_icon.jpg')">
  <li>Vincent Van Gogh</li>
  <li>Henri Matisse</li>
  <li>Paul Gauguin</li>
</ul>

Syntax

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

Values

#

Value Description
none Default. No image will display. The element uses the list-style-type property instead.
url Image path or URL.
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

Did you know?

Did you know?

Image markers with background-image

Alternatively, a background image can also be used as marker.

This has the advantage that the iamges size is adjustable.

Here is an example:

  • Vincent Van Gogh
  • Henri Matisse
  • Paul Gauguin
<style>
  .style-resize > li::before {
    content: '';
    display: inline-block;
    height: 50px;
    width: 50px;
    background-size: cover;
    background-image: url('/img/css/sunflowers-sm.jpg');
    background-repeat: no-repeat;
    margin-right: 10px;
    background-position: center center;
    vertical-align: middle;
  }
</style>

<ul class="style-resize" style="list-style-type: none">
  <li>Vincent Van Gogh</li>
  <li>Henri Matisse</li>
  <li>Paul Gauguin</li>
</ul>

Browser support

This table shows when list-style-image support started for each browser.

Chrome
1.0 Dec 2008
Firefox
1.0 Nov 2004
IE/Edge
4.0 Sep 1997
Opera
7.0 Jan 2003
Safari
1.0 Jun 2003

You may also like

Guides