How to set CSS list-style-image size?

Spread the love

Sometimes, we want to set CSS list-style-image size.

In this article, we’ll look at how to set CSS list-style-image size.

How to set CSS list-style-image size?

To set CSS list-style-image size, we set the background-image property.

For instance, we write

li {
  margin: 0;
  padding: 36px 0 36px 84px;
  list-style: none;
  background-image: url("../../images/checked_red.svg");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 40px;
}

to display the default bullter with list-style: none;

Then we add the bullet image with background-image: url("../../images/checked_red.svg");.

We position the image to where the bullet is with background-position: left center;.

Conclusion

To set CSS list-style-image size, we set the background-image property.

Leave a Reply

Your email address will not be published. Required fields are marked *