How to resize list style image

Question

I have been working on my website most of the day and I have run into a problem, where I wish to remove the standard bullet point from my un ordered list and add an image instead. I have added an image but the standard bullet points are still there and the image is massive, so I am wondering how would i resize the image and remove the standard bullet points.

I have research the internet for a solution and even on this website, where nothing seems to be working

HTML

<div class="rank-info">
                        <h4>Available Ranks</h4>
                        <ul>
                            <li>Test</li>
                            <li>Test</li>
                            <li>Test</li>
                            <li>Test</li>
                            <li>Test</li>
                            <li>Test</li>
                            <li>Test</li>
                            <li>Test</li>
                            <li>Test</li>
                            <li>Test</li>
                            <li>Test</li>
                            <li>Test</li>
                            <li>Test</li>
                            <li>Test</li>
                        </ul>
                        </div>

CSS

.rank-info {
  padding: 0 0 2em;
}
.rank-info h4{
    color:#626262;
    font-size:1.4em;
      font-family: 'Montserrat Alternates', sans-serif;
    margin: 0 0 0.3em;
}
.rank-info p a{
    text-decoration:none;
    color: #9A9898;
}
.rank-info p a:hover{
    color: #ff0000;
}
.rank-info ul{
    color: #9A9898;
    margin-left: 25px;
    list-style-image: url(../images/580b585b2edbce24c47b291a.png);
}
.rank-info li:before {
    content:"·";
    font-size:100px;
    vertical-align:middle;
    line-height:20px;
}

Here is a screenshot of what my problem is:

Screenshot

Than you in advance and any help appreciated

Tried downloading the image, resizing it and then using it ? — Shahin, Jul 27 '19 at 11:30
Does this answer your question? [CSS list-style-image size](https://stackoverflow.com/questions/7775594/css-list-style-image-size) — Kermit, Feb 05 '23 at 12:16

score 2 · Answer 1 · answered Jul 27 '19 at 11:46

you need to resize your image, it's way too big, secondly, put the image on your li not on the UL... check this for the code:

ul.no_bullet {
list-style-type: none;
padding: 0;
margin: 0;
}

li.star {
background: url('https://media.giphy.com/media/vD7NwwgTXO2YM/giphy.gif') no-repeat 
left top;
background-size: 15px;
height: 15px;
padding-left: 20px;
padding-top: 3px;
}

https://jsfiddle.net/u1em6xfn/1/

score 0 · Accepted Answer · edited Jul 27 '19 at 14:16

0

To get rid of the bullet points try using

list-style-type: none;

Just put it into the li or ul selector.

To resize the images i would just use an html tag instead of inserting the image using css. This way you can resize the image in the html tag.

<li>
<image src="../images/580b585b2edbce24c47b291a.png" alt="red star" width="yourWidth" height="yourHeight"</image>
</li>

edited Jul 27 '19 at 14:16

Shahin

2,507
1
13
17

answered Jul 27 '19 at 11:35

Marco Rodriguez

132
1
1
7

1

But this won't let the image be the bullet point that he needs. – Shahin Jul 27 '19 at 11:55

How to resize list style image

2 Answers2