Преобразуйте фоновое изображение в объектную проблему

Question

Я не знаю, как преобразовать этот фон в объект и поместить его в кнопку для моего меню, потому что текст и изображение накладываются. Мне нужна помощь, чтобы преобразовать фоновое изображение (маленький png) в объект, чтобы текст «Lorem ipsum dolor sit amet, consectetur adipisci elit» не мог наложиться на него, я не знаю, если вы понимаете, я не так хорош в английском sh Большое спасибо

.menu22 {
  padding-left: 0;
  list-style: none;
  width: 300px;
  margin: 0 auto;

}

.menu22 li {
  background-image: url("https://i.ibb.co/SyCRm7z/1.png");
  background-repeat: no-repeat;
  background-position: 15px center;
  position: relative;

}

.menu22 li:hover {
  	color: #404040 !important;
	font-weight: 700 !important;
	letter-spacing: 1px;
	background-image: url("https://i.ibb.co/SyCRm7z/1.png");
	-webkit-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
	-moz-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
	transition: all 0.3s ease 0s;
}

.menu22 a{
  display: block;
  padding: 23px 0;
  color: grey;
  font-size: 18px;
  text-decoration: none;
  text-align: center;
}

<ul class="menu22">
			<li><a href="#">object1</a></li>
			<li><a href="#">Lorem ipsum dolor sit amet</a></li>
			<li><a href="#">object3</a></li>
			<li><a href="#">Lorem ipsum dolor sit </a></li>
			<li><a href="#">object5</a></li>
			<li><a href="#">Lorem ipsum dolor sit amet</a></li><br>
</ul>

Answer 1

Добавьте еще один тег div внутри тега li и сделайте так, чтобы фон css картинка была внутри div, а не фон самого тега li.

Answer 2

Добавлены некоторые отступы для тега привязки: padding-left: 15%;

.menu22 {
  padding-left: 0;
  list-style: none;
  width: 300px;
  margin: 0 auto;

}

.menu22 li {
  background-image: url("https://i.ibb.co/SyCRm7z/1.png");
  background-repeat: no-repeat;
  background-position: 15px center;
  position: relative;

}

.menu22 li:hover {
  	color: #404040 !important;
	font-weight: 700 !important;
	letter-spacing: 1px;
	background-image: url("https://i.ibb.co/SyCRm7z/1.png");
	-webkit-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
	-moz-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
	transition: all 0.3s ease 0s;
    padding-left:6%;
}
  .menu22 a{
  display: block;
  padding: 23px 0;
  color: grey;
  font-size: 18px;
  text-decoration: none;
  text-align: center;
  padding-left:15%;
}

<ul class="menu22">
			<li><a href="#">object1</a></li>
			<li><a href="#">Lorem ipsum dolor sit amet</a></li>
			<li><a href="#">object3</a></li>
			<li><a href="#">Lorem ipsum dolor sit </a></li>
			<li><a href="#">object5</a></li>
			<li><a href="#">Lorem ipsum dolor sit amet</a></li><br>
</ul>