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.
“With browsers that support the CSS3 Spec (Safari only at the time of this writing)” – not quite correct; the CSS 3 Spec is in many modules, and different modules – and parts of modules – are supported by different browsers – although most modules are unsupported at all.
Also, Konqueror supports multiple background images too, and fingers crossed the next release of Opera will likewise.
Thanks for the clarification Peter!
In the context of this example, I just wanted to make clear that Safari supports this particular feature and that all the FF and IE visitors out there wouldn’t click on the example be confused.
Konqueror supports multiple background images too, it’s cool…..