How do I repeat part of an image using background-position and CSS sprites?

Question

I would like to create some buttons with dynamic width using CSS sprites and background-position but I'm not sure if what I want is possible..

I would like the button to have a left-side, middle, and right-side, with the middle repeating as required. Ideally I would like this to be made up of one image of 11px wide so the left and right sides are both 5px wide and the middle is 1px repeated. Is there some way I can define in CSS to use the one centre pixel of the image and repeat if for the required (unknown) width?

Normally I've used two images to achieve similar results - one for the sides and a second image of 1px width for the middle, but if there's some way of combining them into one image I would prefer to use that.

Answer 1

The short answer is this isn't possible (or at least, not worth it 99% of the time) with a sprite map, not with varying dimensions.

In most cases, a sprite-map isn't ideal for the repeating parts of a background, though it's excellent for the non-repeating portions.

Based on what you're after though, I'd take a look at the sliding doors approach to the problem, seems to fit what you want pretty well.