CODEWITHSUNDEEP
htmlcss
Lucia Ricci
Lucia Ricci

Reputation: 38

Adding special Background Image for <li>

I'm trying to add special jpg image in side of each <li>

But list-style-image:url('sqpurple.jpg'); work bad, how to make the position of the bullet in the lift side?

Upvotes: 1

Views: 99

Answers (2)

way2vin
way2vin

Reputation: 2551

Use list-style-postion Try your code with following changes

ul li{
  list-style-position: outside;
  list-style-image: url(sqpurple.jpg);
  padding-left: 10px 
}

Or use background-image

ul{
   list-style-type: none;
   padding: 0;
   margin: 0;
}
li{
   background: url(arrow.gif) no-repeat left top;
   padding-left: .6em;
}

Upvotes: 0

Daniel Ezra
Daniel Ezra

Reputation: 1444

The best way is using background-image instead list-style

#ul_id { 
   list-style: none; padding 0px; margin: 0px;}

 #ul_id li {
   background-image: url("/Content/Icons/bullet.png"); // url path location
   background-position: 1px 2px; // the position of the background
   background-repeat: no-repeat; // make the background not to repeat
            }

Upvotes: 2

Related Questions