LearnFast.Ninja

CSS ul image background with image sprite

You want to have list with your own image, and you also want to do it with image sprites? Things going to be complicated, nut no worries, follow these steps to create the best list style!

Step 1: Create your image sprite if you not have it already.


Step 2: Write your the Html list.

<ul class="List-Arrow">

    <li>Link 1</li>

    <li>Link 2</li>

    <li>Link 3</li>

</ul>


Step 3: Write the CSS trick.

.List-Arrow

{

    margin0px;

    padding0px;

    list-stylenone;

}

 

.List-Arrow li

{

    padding-left20px;

    backgroundurl(/Images/Sprite.png) no-repeat -10px 4px;

    line-height20px;

}


Result:


Tags

css

ul li list sprite image-sprite image-sprites