styling css unordered lists as image-CodePudding

I was trying to crate unordered lists and change marker to image. But my marker is don't showing up. I don't know what I did wrong. I need some help.

This is my CSS code:

ul {
  list-style-type: none;
  padding-left: 50px;
  margin-top: 22px;
}
li {
  position: relative;
  font-size: 17px;
  font-weight: 300;
  line-height: 24px;
  margin-bottom: 10px;
}
li::before {
  content: '';
  display: block;
  position: absolute;
  left: -32px;
  top: 3px;
  width: 21px;
  height: 20px;
  background: url('../icons/icon_blue_list.svg') center (center / cover) no-repeat;
}

CodePudding user response：

It should be as follows. Also I don't think you need a ::before psudo effect

background: url('../icons/icon_blue_list.svg') no-repeat left top;

You should also use the list-style-image property instead

CodePudding user response：

The problem was a syntax problem. Using center/cover no-repeat would fix it.

ul {
  list-style-type: none;
  padding-left: 50px;
  margin-top: 22px;
}
li {
  position: relative;
  font-size: 17px;
  font-weight: 300;
  line-height: 24px;
  margin-bottom: 10px;
}
li::before {
  content: '';
  display: block;
  position: absolute;
  left: -32px;
  top: 3px;
  width: 21px;
  height: 20px;
  /* Changed  "center (center / cover) no-repeat" */
  background: url('https://picsum.photos/200') center/cover no-repeat;
}

<ul>
  <li>1</li>
  <li>1</li>  
  <li>1</li>  
</ul>