Change size of Bullet Images in CSS

Question

that's the code

list-style-image:  url("https://www.boylesoftware.com/blog/wp-content/uploads/2015/04/checkmark.png") ;

I was expecting it be of small size like that of a actual bullet but it turned out too big

Does this answer your question? [CSS list-style-image size](https://stackoverflow.com/questions/7775594/css-list-style-image-size) — Cédric, Dec 28 '22 at 08:17
Please post more code of what you have tried. Read [ask] and [mcve] — Sfili_81, Dec 28 '22 at 08:54

score 1 · Answer 1 · edited Dec 28 '22 at 08:54

You can fix that problem applying the below style:

li {
  margin: 0;
  padding: 0 0 0 20px;
  list-style: none;
  background-image: url("https://www.boylesoftware.com/blog/wp-content/uploads/2015/04/checkmark.png");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 15px;
}

<h1>The list-style-image Property</h1>

<p>The list-style-image property replaces the list-item marker with an image:</p>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

score 0 · Answer 2 · answered Dec 28 '22 at 08:22

0

<style>
.check{
    width: 25px;
    height: 25px;
}
</style>
<p>Unordered List <img class="check" src="https://www.boylesoftware.com/blog/wp-content/uploads/2015/04/checkmark.png" alt="Alternate Text" /><a href="#">Step 1</a></p>

answered Dec 28 '22 at 08:22

Fisny

1

This removes the semantics of a list. – A Haworth Dec 28 '22 at 09:15

Change size of Bullet Images in CSS

2 Answers2