So I want a picture to become a bullet for my list. I want to use a background image to become a bullet. But it becomes the background of the item.
ul {
list-style-type: none;
}
li {
background-image: url('https://via.placeholder.com/50')
}<ul>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>It must be done with a background-image and not with a list-style-image
What do I need to change?
If you would like to use the background-image property, here is a working example:
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
li {
background-image: url(https://developer.mozilla.org/static/media/edge.40018f6a.svg);
background-repeat: no-repeat;
background-position: 0 .4em;
padding-left: 20px;
}<ul>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>Here is an example using the list-style-image CSS property
ul {
list-style-type: none;
}
li {
list-style-image: url('https://via.placeholder.com/50')
}<ul>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>Change the list-style-image of the ul
ul {
list-style-image: url('https://via.placeholder.com/50')
}<ul>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>You need to use list-style-image to use an image instead the regular bullets
https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-image
The list-style-image CSS property sets an image to be used as the list item marker.
ul {
list-style-type: none;
}
li {
list-style-image: url('https://via.placeholder.com/50')
}<ul>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>If the idea is to fake a bullet via background, then background-size and background-position will be required. Here below an example using the shorthands syntaxe for background
ul {
list-style-type: none;
padding:0;
}
li {
background: url('https://via.placeholder.com/50') 0 50% / 1em 1em no-repeat;
padding-left:1.5em;
}<ul>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>