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.
