With browsers that support the CSS3 Spec (Safari only at the time of this writing) there is no longer need for the sliding doors technique to create horizontally expanding elements that utilize background images. The ability to assign multiple background images to a single element makes quick work of the problem. Assign an image that positions to the left, a repeading middle image, and an image that positions to the right, like so:

li.expanding {
background: url('left.jpg') top left no-repeat,
url('right.jpg') top right no-repeat,
url('middle.jpg') top center repeat-x;
height: 40px;
padding-top: 12px;
padding-left: 12px;
padding-right: 20px;
float: left;
}

The images get laid down in the order you declare them, so the top-most-image will be the first one you declare. In other words, declare the repeating images last. Then you can use a simple list markup like this:

<ul>
	<li class="expanding">This</li>
	<li class="expanding">Little Piggy</li>
	<li class="expanding">Went To The Market</li>
</ul>

And you get this:

Pretty slick.

[LIVE EXAMPLE] (remember: Safari only)

[DOWNLOAD EXAMPLE] (Photoshop file included)