bullet point with different background images

Question

Trying to make background images for instead of bullet points but can't see why they aren't displaying properly?

I need them to show a different background dependent on which bullet it is numerically. eg 10 bullets each with different backgrounds.

https://jsfiddle.net/bigdaddyt_351/nb21c7v4/1/

<ul>
    <li>bullet 1</li>
    <li>bullet 2</li>
    <li>bullet 3</li>
    <li>bullet 4</li>
    <li>bullet 5</li>
    <li>bullet 6</li>
    <li>bullet 7</li>
    <li>bullet 8</li>
    <li>bullet 9</li>
    <li>bullet 10</li>
</ul>


li{
    background: url('http://www.amiriconstruction.co.uk/wp-content/uploads/2015/08/Untitled-10.jpg') no-repeat left center;
    display:block;
    text-indent:15px;
    line-height:1.5em
}

Answer 1

The file is called as sprites. Each box is a single image in your case. In your CSS try this:

.bullet {background: url('http://www.tonytansley.co.uk/so/Untitled-10.jpg') no-repeat; display: inline-block; width: 12px; height: 12px; margin-right: 5px;}
.bullet-1 {background-position: 0px 0px;}
.bullet-2 {background-position: 5px 0px;}

And in your List Item, you need to remove the margin and padding. Use it this way:

li {margin: 0; padding: 0; list-style: none;}

And in the HTML give it as:

<li><i class="bullet bullet-1"></i> Hello</li>

And so on.

Snippet

 * {font-family: 'Segoe UI'; margin: 0; padding: 0; list-style: none;} .bullet {background: url('http://www.tonytansley.co.uk/so/Untitled-10.jpg') no-repeat; display: inline-block; width: 10px; height: 10px; margin-right: 5px;} .bullet-1 {background-position: 0px 0px;} .bullet-2 {background-position: -10px 0px;} .bullet-3 {background-position: -20px 0px;} .bullet-4 {background-position: -30px 0px;} .bullet-5 {background-position: -40px 0px;} .bullet-6 {background-position: -50px 0px;} .bullet-7 {background-position: -60px 0px;} .bullet-8 {background-position: -70px 0px;} .bullet-9 {background-position: -80px 0px;} .bullet-10 {background-position: -90px 0px;} 

 <ul class="bullets"> <li><i class="bullet bullet-1"></i> Bullet 1</li> <li><i class="bullet bullet-2"></i> Bullet 2</li> <li><i class="bullet bullet-3"></i> Bullet 3</li> <li><i class="bullet bullet-4"></i> Bullet 4</li> <li><i class="bullet bullet-5"></i> Bullet 5</li> <li><i class="bullet bullet-6"></i> Bullet 6</li> <li><i class="bullet bullet-7"></i> Bullet 7</li> <li><i class="bullet bullet-8"></i> Bullet 8</li> <li><i class="bullet bullet-9"></i> Bullet 9</li> <li><i class="bullet bullet-10"></i> Bullet 10</li> </ul> 

Answer 2

Need to use the :before element and nth-of-type. eg

li:before{
    background: url('http://www.amiriconstruction.co.uk/wp-content/uploads/2015/08/Untitled-10.jpg') no-repeat left 50%;
    display:block;
    width:10px;
    height:10px;
    position:absolute;
    content: " ";
    top:10px;
    left:0;
}
li:first-of-type:before{
    background-position:0 0;
}
li:nth-of-type(2):before{
    background-position:-10px 0;
}
li:nth-of-type(3):before{
    background-position:-20px 0;
}

etc... https://jsfiddle.net/Luw0u4h2/2/