"List-style-image"the image size..

Question

please help me, how can i resize the image i want to use here, it always appears in actual size or really big... .

Answer 1

Try this

ul {

  list-style-type: none;

}

ul li:before {

  content: '';

  display: inline-block;

  height: 10px;

  width: 10px;

   background-size: 10px;

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

  background-repeat: no-repeat;

  margin-right: 5px;

}

Answer 2

Hmmmm Never see how to do that.gotta find it

Answer 3

You can't resize list-style-image. it will be actual size of the linked image, if you increase font-size then list font size will also increase. so you can use pseudo selector to apply background image so that you can control the image size

Answer 4

use css ...

img {
width: 100px;
height: 100px;
}

modify the size as your need

Answer 5

li{
font-size:20px;/*Or more.You can't resize only bullet easily like that...*/
}

Answer 6

....May we watch your full code?
Bc I think you misunderstand now

Answer 7

Um then?

Answer 8

Try "font-size" property

Answer 9

@dorsay yes, it does. in that case use class or id selector. it was just for demonstration only

Answer 10

but doesn't it change the size of all of my images?

Answer 11

how?

Answer 12

nope.it just replaces the large images with bullets...

Answer 13

i'm just testing this "list-style-image" for the first time in the google chrom on my laptop

Answer 14

i'll write ot here and i add it to my next answer.thank u:*

Answer 15

You can change the image size to 10px X 10px before using it as list-style-image.
This will solve your problem.

Answer 16

wow thank you...it finally worked...

Answer 17

Please, note to use pseudo-element "::before".
(https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements)

ol {
list-style-type: none;
}

ol li::before {
content: '';
display: inline-block;
height: 40px;
width: 40px;
background-size: 40px;
background-image: url('../images/cat.png');
background-repeat: no-repeat;
margin-right: 10px;
background-position: center center;
vertical-align: middle;
}

Because my background-image is somehow large (100 by 84), I added "background-position: center center;" and "vertical-align: middle;" in order to align the image with the list element text.

Answer 18

pls who has the write answer