CODEWITHSUNDEEP
htmlcss
dmarinus
dmarinus

Reputation: 161

Background image on <li> becomes background instead of becoming list bullet

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?

Upvotes: 2

Views: 175

Answers (3)

BeerusDev
BeerusDev

Reputation: 1509

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>

Upvotes: 3

G-Cyrillus
G-Cyrillus

Reputation: 105893

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>

Upvotes: 2

depperm
depperm

Reputation: 10746

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>

Upvotes: 2

Related Questions