CSS list-style-image Property
The list-style-image property replaces the list-item marker with an image.
Note: Always specify the list-style-type property in addition. This property is used if the image for some reason is unavailable.
| Default value: | none |
|---|---|
| Inherited: | yes |
| Animatable: | no. Read about animatable |
| Version: | CSS1 |
| JavaScript syntax: | object.style.listStyleImage=»url(‘smiley.gif’)» Try it |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
CSS Syntax
Property Values
| Value | Description | Demo |
|---|---|---|
| none | No image will be displayed. Instead, the list-style-type property will define what type of list marker will be rendered. This is default | Demo ❯ |
| url | The path to the image to be used as a list-item marker | Demo ❯ |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
Related Pages
COLOR PICKER
Report Error
If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:
Thank You For Helping Us!
Your message has been sent to W3Schools.
Top Tutorials
Top References
Top Examples
Get Certified
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.
list — style — image
Свойство устанавливает картинку в качестве маркера у списка.
Пример
Скопировать ссылку «Пример» Скопировано
ul list-style-image: url("rocket.svg");>ul list-style-image: url("rocket.svg"); >
Как пишется
Скопировать ссылку «Как пишется» Скопировано
.selector list-style-image: none;>.selector list-style-image: none; >
.selector list-style-image: url("starsolid.gif");>.selector list-style-image: url("starsolid.gif"); >
Подсказки
Скопировать ссылку «Подсказки» Скопировано
💡 Размером и положением маркера нельзя управлять, поэтому он будет равен размеру картинки и выровнен по базовой линии текста. Из этой особенности следует, что картинку-маркер следует заранее подготовить, подогнав под нужный размер.
💡 Это наследуемое свойство, поэтому чаще всего его задают тегу списка, чтобы все внутренние элементы унаследовали его. Но при желании каждому элементу списка можно задать его индивидуально.
💡 Если по какой-то причине изображение не загрузится, будет показан маркер по умолчанию. Для это нумерация, для — маркер, соответствующий уровню вложенности.
💡 Согласно справочникам свойство не анимируется, но в некоторых браузерах (Chrome, Safari) есть поддержка плавной смены картинки с использованием transition .
li list-style-image: url("marker.png"); transition: list-style-image 0.3s;> li:hover list-style-image: url("marker_hover.png");>li list-style-image: url("marker.png"); transition: list-style-image 0.3s; > li:hover list-style-image: url("marker_hover.png"); >
CSS list-style-image size
The list-style-image property is used to put an image instead of the list item marker. Play it » url Is used to give the source url of the image which will be used as list item marker.
CSS list-style-image size
The problem is that the the images are too large, and stretch the height of the lines. I don’t want to change the image size, because the point of using SVG is to scale with the resolution. Is there a way to set the size of the image using CSS without some sort of background-image hack?
EDIT: Here’s a preview (large image deliberately chosen for illustration and drama): http://jsfiddle.net/tWQ65/4/
And my current background-image workaround, using CSS3’s background-size : http://jsfiddle.net/kP375/1/
where background- size set the background image size.
You can see how layout engines determine list-image sizes here: http://www.w3.org/wiki/CSS/Properties/ list-style -image
There are three ways to do get around this while maintaining the benefits of CSS:
- Resize the image.
- Use a background-image and padding instead (easiest method).
- Use an SVG without a defined size using viewBox that will then resize to 1em when used as a list-style-image (Kudos to Jeremy).
You might would like to try img tag instead of setting ‘list- style-image ‘ property. Setting width and height using css will actually crop the image. But if you use img tag, the image will be re-sized to value of width and height.
CSS: Positioning of list-style-image, so set the list-style to none and put a background-image on the li — then yes you’ll be able to position it a bit more accurately using the background …
CSS list-style-image Property
The list-style-image property is used to put an image instead of the list item marker.
If the image has an inherent width and height, they will be used as width and height. If the image has an inherent ratio and an inherent height/width, they will be used as width and height. The used value of the missing dimension will be calculated from from the provided ratio and dimension.If the image has an inherent ratio and either an inherent height/width, the used height/width will be the same as the provided inherent height/width. The used value of the missing dimension will be calculated from from the provided ratio and dimension.
| Initial Value | none |
| Applies to | List items. |
| Inherited | Yes. |
| Animatable | No. |
| Version | CSS1 |
| DOM Syntax | object.style.listStyleImage = «url(«image.jpg»)»; |
Syntax
list-style-image: none | url | initial | inherit;Example of the list-style-image property:
html> html> head> title>Title of the document title> style> ul < list-style-image: none; > style> head> body> h2>List-style-image property example h2> ul> li>List item 1 li> li>List item 2 li> li>List item 3 li> ul> body> html>Result
Example of the list-style-image property with an attached source URL of the image:
html> html> head> title>Title of the document title> style> ul < list-style-image: url("/uploads/media/default/0001/01/03d3f916bd5c266dd5008d5c210478cc730437eb.png"); > style> head> body> h2>List-style-image property example h2> ul> li>List item 1 li> li>List item 2 li> li>List item 3 li> ul> body> html>Values
| Value | Description | Play it |
|---|---|---|
| none | Means that there won’t be any image shown. Instead of image, the list marker which is defined with list-style-type will be shown. It is the default value of this property. | Play it » |
| url | Is used to give the source url of the image which will be used as list item marker. | Play it » |
| initial | Makes the property use its default value. | Play it » |
| inherit | Inherits the property from its parents element. |
CSS | list-style-image Property, The list-style-image property in CSS is used to set the image that will be used as the list item marker. Syntax: The browser supported by list …
CSS list-style-image
I got a problem with CSS list-style-image tag my list image is some what large, and the text getting behind it is pushed down to the lower part of the style tag, is there a fix to bit it back in the middle
Just increase the line-height of the li elements in question.
Also, as keithjgrant suggested, I would use background-images instead. List-images are positioned rather inconsistently in different browsers. **** something like this:
Forget setting the list style image and use the following css.
ul#example li < list-style-type: none; >/* create new marker */ ul#example li:before < display: marker; content: url("new_marker.png"); /* set the following to fit your needs */ vertical-align: 3px; padding-left: 2px; padding-right: 12px; >Note the vertical align style, set it to minus figures to push text upwards.
Your question is a little unclear, but it sounds like you might need to look at background images rather than (or supplement to) list-style-images.
The only realistic way to achieve this is with background-image :
This does, however, fail badly if the text of the li wraps to a second (or third) line.
CSS list-style-image property, Definition and Usage. The list-style-image property replaces the list-item marker with an image. Note: Always specify the list-style-type property in addition. This …
Help With list-style-image
I have set an image 32x32px as a list style image like this:
It works great but the problem is the text is on the bottom of the list item (because the image is 32px high the list item is also 32px high). I would like to have the text vertically centered so it looks good.
You can use the vertical-align property to specify centered alignment. Like so:
The list-style-image tag should be applied to the list itself, and not the list item as you have. So it would be..
I find it rather difficult to get the image exactly to where I want when relying only on list-style to do the work.
Therefore I prefer placing the image as background inside the LI tag like so
This results in the image being placed 1 pixel to the right and 4 pixels to the bottom measured from the top left corner of the area covered by the LI tag. margin:0 is required to avoid indentation of the LI contents, as we do this with the padding:20px to make room for the image to the left of the LI contents.
I tried all of the above and nothing worked so I did this
Now that works like a charm — infact this also gives me more control on the exact place where i wanted to put my li images . The images I used were 32 X 32 px in size so I gave them a little extra padding by making that 50px;
Html — list-style-image is not working, Specifically I think you’re trying to create custom bullets that are images, here is how I would do it. The CSS. .list < margin: 0; padding: 0; >.list-li < …