Is it possible to use 2 background images for an element?

[liunx]

I am trying to find out if there is a way to have 2 background images for a single element. I don't think this can really be done, but I thought I remembered reading about a way to simulate this. My scenario is this: I have an unordered list, and the first item in the list is the "header", or title of the list. I currently have a background image that is of fixed width, which makes the list appear to have curved top corners. The main problem with this is if I wanted to change the width of the list, I have to change the image. Basically, what I want to do is just use an image for the curves (so two images, one for left and one for right), and then apply a bg color to the element, so the width of the list can be set to whatever I want, and the look of the "header" will remain the same.

This is my current code that I am using:


.form { width:350px; margin:0 0 10px; padding:0; list-style:none; list-style-image:none; background-color:#EEEEEE; }
.form li { margin:0; padding:10px 10px 0; border-left:1px solid #243E90; border-right:1px solid #243E90; }
.form li.head { color:#FFFFFF; font-weight:bold; font-size:12px; text-align:center; height:18px; padding:2px 0 0;
background:#FFFFFF url(../images/formHead.gif) top no-repeat; border:0;
}


Any suggestions?Used Nested DIVS:

<div id="nav">
<div id="nav2">
<div id="nav3">
<div id="nav4">
<h4>Nav header</h4>
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">...</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">...</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">...</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">...</a></li>
</ul>
</div>
</div>
</div>
</div>

Then in CSS:

#nav {
background: #someColor url(/path/to/upperLeft.gif) no-repeat scroll 0 0;
}

#nav2 {
background: transparent url(/path/to/upperRight.gif) no-repeat scroll 100% 0;
}

#nav3 {
background: transparent url(/path/to/bottomRight.gif) no-repeat scroll 100% 100%;
}

#nav4 {
background: transparent url(/path/to/bottomLeft.gif) no-repeat scroll 0 100%;
}

Nesting DIVs is OK when you aren't replacing semantic markup. And your nav header should be marked up as a header. Style it using CSS.