Question

I am using an image for the bottom border of a list items. I want to use a bullet image on the left for each of the item as well. So how can I use 2 background images for a list item? Currently I have following:

li{
    width:200px;
    padding:3px 5px;
    background: url(images/dot.png) repeat-x left bottom;
}

Answer 1

---

Using a bullet image:

---

li 
{
   list-style-image: url('bullet.png');
}

Just add it to your existing style:

li
{
    width:200px;
    padding:3px 5px;
    background: url(bg.png) repeat-x left bottom;
    list-style-image: url('bullet.png');
}

---

ADDON (CSS3 Variant)

---

If you need some special effects you should use CSS3’s multi-layered Backgrounds. (With effects I mean size, position or repeat)

li{
    width:200px;
    padding:3px 5px;
    background: url(images/dot.png) no-repeat left bottom,
         url(images/image.png) repeat-x right top;
}