0

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

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

13th May 2017, 5:22 PM
dorsay a
dorsay a - avatar
18 Answers
+ 10
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; }
13th May 2017, 5:47 PM
Apel Mahmod
Apel Mahmod - avatar
+ 6
Hmmmm Never see how to do that.gotta find it
13th May 2017, 5:29 PM
Yanothai Chaitawat
Yanothai Chaitawat - avatar
+ 6
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
13th May 2017, 5:55 PM
Apel Mahmod
Apel Mahmod - avatar
+ 5
use css ... img { width: 100px; height: 100px; } modify the size as your need
13th May 2017, 5:24 PM
Apel Mahmod
Apel Mahmod - avatar
+ 5
li{ font-size:20px;/*Or more.You can't resize only bullet easily like that...*/ }
13th May 2017, 5:33 PM
Yanothai Chaitawat
Yanothai Chaitawat - avatar
+ 5
....May we watch your full code? Bc I think you misunderstand now
13th May 2017, 5:38 PM
Yanothai Chaitawat
Yanothai Chaitawat - avatar
+ 5
Um then?
13th May 2017, 5:43 PM
Yanothai Chaitawat
Yanothai Chaitawat - avatar
+ 4
Try "font-size" property
13th May 2017, 5:30 PM
Yanothai Chaitawat
Yanothai Chaitawat - avatar
+ 4
@dorsay yes, it does. in that case use class or id selector. it was just for demonstration only
13th May 2017, 5:36 PM
Apel Mahmod
Apel Mahmod - avatar
+ 1
but doesn't it change the size of all of my images?
13th May 2017, 5:27 PM
dorsay a
dorsay a - avatar
+ 1
how?
13th May 2017, 5:32 PM
dorsay a
dorsay a - avatar
+ 1
nope.it just replaces the large images with bullets...
13th May 2017, 5:36 PM
dorsay a
dorsay a - avatar
+ 1
i'm just testing this "list-style-image" for the first time in the google chrom on my laptop
13th May 2017, 5:41 PM
dorsay a
dorsay a - avatar
+ 1
i'll write ot here and i add it to my next answer.thank u:*
13th May 2017, 5:46 PM
dorsay a
dorsay a - avatar
+ 1
You can change the image size to 10px X 10px before using it as list-style-image. This will solve your problem.
10th Jun 2019, 6:18 AM
Abhishek Sinha
Abhishek Sinha - avatar
0
wow thank you...it finally worked...
13th May 2017, 5:53 PM
dorsay a
dorsay a - avatar
0
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.
27th Oct 2017, 1:40 PM
TimKader
0
pls who has the write answer
8th Jul 2020, 12:54 PM
Lukman Abdur-Rahman Olawale
Lukman Abdur-Rahman Olawale - avatar