CODEWITHSUNDEEP
htmlcss
snitchyc
snitchyc

Reputation: 13

Problems with list-style-image

I am having a problem with my bullet list using an image instead of regular bullets for a class assignment. The image is not placed next to the list and instead is placed in the set of words.

My HTML for this portion looks like this:

     li {
       background: url('http://s30.postimg.org/52wxo16t9/bullet_Image.png') 2px 4px no-repeat;
       display: list-item;
       padding: 3px 3px 3px 20px;
       overflow: visible;
       list-style: none;
     }
<ol>
  <li class="planet">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  <li class="planet">Aliquam tincidunt mauris eu risus.</li>
</ol>

Upvotes: 0

Views: 38

Answers (2)

semirturgay
semirturgay

Reputation: 4201

You can do that easily by using list-style-image property at your ol tag. 

ol {
    list-style-image: url('your_image_url');
}

example

Upvotes: 2

Shai UI
Shai UI

Reputation: 51918

change it to:

li{
        background:url('http://s30.postimg.org/52wxo16t9/bullet_Image.png') no-repeat;
        background-size: 10px 10px;
        display: list-item;
         background-position:0px 7px;
        padding: 3px 3px 3px 20px;
        overflow: visible;
        list-style: none;
    }

Upvotes: -1

Related Questions