How do you resize a list style image in CSS

How do you resize a list style image in CSS
0.0 0

#1

Tell us what’s happening:

I’m working on adding image bullets in my tech doc page project but the image that I’m using is showing up way too big. Can any one help me resize it properly.

Here’s my link to see it in action:

Your code so far

ul.pool {list-style-image: url(http://www.freepngimg.com/thumb/star/1-red-star-png-image-thumb.png); }
list-style-image:
.pool {
list-style-type: none;
}
ul.pool :before {

content: ‘’;

display: ;

height: 10px;

width: 10px;

background-size: 2px;

background-image: url(“http://www.freepngimg.com/thumb/star/1-red-star-png-image-thumb.png”);

background-repeat: no-repeat;

margin-right: 0px;

}
Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.170 Safari/537.36 OPR/53.0.2907.68.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page


#2

try adding this transform: scale(0.2); line to your ul.pool definition.


#3

Thanks for your help. Unfortunately, your suggestion didn’t help but it lead me to something that was working. Too bad I lost it and am back at my original problem.

Definitely, been working at it too long. I’ll leave it alone and go back to it with fresh eyes.