When I was putting together the rounded border box example, it occurred to me that a better fit for the single image method would be on sliding doors.

A common misconception about sliding doors is that it necessitates splitting the sliding image into two images.

You only need to split the sliding image when it includes a transparent portion that must allow another background image to shine through.

If your images don't include transparency OR if your images aren't over another background image (and even then, sometimes), you can and should use a single image.

Starting point

Let's take a slightly altered version of ALA's Version 1 example.

<!--[if lt IE 7]><div class="IE"><![endif]-->
<div id="header">
  <ul>
    <li><a href="#">Home</a></li>
    <li class="current"><a href="#">News</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>
<!--[if lt IE 7]></div><![endif]-->

And the css

* { margin: 0; padding: 0; }
body {
    background: #fff;
    color: #000;
    font: normal 76%/1.5 Georgia, Times New Roman, serif;
}
#header {
    float: left;
    width: 100%;
    background: #DAE0D2;
}
#header ul {
    padding: 10px 10px 0;
    list-style: none;
    overflow: hidden;
}   
#header li {
    float: left;
    background: url("left.gif") no-repeat left top;
    padding-left: 9px;
}
#header a {
    float: left;
    background: url("right.gif") no-repeat right top;
    padding: 5px 15px 4px 6px;
    text-decoration: none;
    font-weight: bold;
    color: #765;
}
#header a:hover {
    color: #333;
}
#header .current {
    background-image: url("left_on.gif");
}
#header .current a {
    background-image: url("right_on.gif");
    color: #333;
    padding-bottom: 5px;
}
.IE #header ul {
    zoom: 1;
}

Take a look. I removed the container's background image, cleaned up some odd style declarations, and moved the IE/PC targeting to a conditional comments driven method. Not as pretty without the background image, I know. But let's stay focused.

A simple change with a big payoff

Now, we take right.gif and left.gif and combine them into tab.gif

and do the same for right_on.gif and left_on.gif

And change the background declarations to point to the new images.

* { margin: 0; padding: 0; }
body {
    background: #fff;
    color: #000;
    font: normal 76%/1.5 Georgia, Times New Roman, serif;
}
#header {
    float: left;
    width: 100%;
    background: #DAE0D2;
}
#header ul {
    padding: 10px 10px 0;
    list-style: none;
    overflow: hidden;
}   
#header li {
    float: left;
    background: url("tab.gif") no-repeat left top;
    padding-left: 9px;
}
#header a {
    float: left;
    background: #DAE0D2 url("tab.gif") no-repeat right top;
    padding: 5px 15px 4px 6px;
    text-decoration: none;
    font-weight: bold;
    color: #765;
}
#header a:hover {
    color: #333;
}
#header .current {
    background-image: url("tab_on.gif");
}
#header .current a {
    background-image: url("tab_on.gif");
    color: #333;
    padding-bottom: 5px;
}
.IE #header ul {
    zoom: 1;
}

Since the image includes transparency, I've set the background-color on the a to mask the li's background image and blend with the ul's background-color.

Step 2, profit

That's it. Besides the container background-image concern, there's really not that much to consider. And the benefits are:

1. reduced page resource requests by (at least) two images—a big help for browsers that use a limited set of concurrent connections to load page resources
2. rendering of the graphics should always happen simultaneously—no one-sided tabs while you wait for the other side to arrive from the server
3. when you want to change the look of your site, you only have one file to edit
4. no concern about browser caching causing a mix and match of old and new images, making one side green and the other red

Exceptions to the no background image rule

You can actually use the single-image method in some cases where you are working over a background image. The key is the placement of the transparency in the sliding image relative to the background image below it.

Exception 1

When the slider transparency overlaps a region of the background image that is a solid color. For example, ALA's Version 3. You can see that recreated in single-image mode here.

Exception 2

If your images include transparency, but the background behind the transparent portion will always be exposing the same portion of the background image, you can modify the slider image, filling the transparency with the background pattern. Less flexible? yes. Still, one fewer image request doesn't hurt. It's up to you whether it's worth it.

So stop creating so much work for yourself and the browser!