How do I repeat part of an image using background-position and CSS sprites?
- by thor
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.