Tutorial 1 - Background images for bullets

Step 5 - Set no-repeat

To stop the background image from repeating under the list items, set the "background-repeat" to "no-repeat". There is now only one image per list item, but they will need to be positioned.

Go to Step 6 →

CSS CODE
ul
{
list-style-type: none;
padding: 0;
margin: 0;
}

li
{
background-image: url(arrow.gif);
background-repeat: no-repeat;
}


HTML CODE
<ul>
<li><a href="#">Milk</a></li>
<li><a href="#">Eggs</a></li>
<li><a href="#">Cheese</a></li>
<li><a href="#">Vegetables</a></li>
<li><a href="#">Fruit</a></li>
</ul>
Other Max Design articles and presentations
Associated with webstandardsgroup.org