Problems with list-style-image

Question

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> 

Answer 1

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

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

example

Answer 2

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;
    }