CSS possible to fill background of element with 1px area of sprite image?

Question

I like sprites, they are extremely helpful to my overall needs, however. I am trying to figure out if there is a means of using a sprite image as a background image for an element thats 100% wide, but the background part of the sprite I want to apply is 1px wide. Where as the sprite is currently 100px wide and about 180px high currently. Is this even possible/legal? If so how would I do that? Or do I have to stick with the idea of a 1px by 120px image thats independent of the sprite to span a background the way I want to on a given element?

Note I thought about doing just the 0 0 position of the sprite as the BG I want but my issue with that is I have a similar portion of the sprite I want to use as a rollover effect for some areas

Answer 1

So it makes 3 divs placed inside one div. For left and right, clip your sprite as you would usually do. For middle, make your sprite LONG ENOUGH so that any middle part of the button is filled with the long portion of the sprite.

Never ask questions, use your imagination.

Answer 2

I think you might be able to achieve this through a pseudo background crop. There's a usful article here: http://nicolasgallagher.com/css-background-image-hacks/ that might help.

However, I'm skeptical that this can be used as a repeating background image. You might be able to stretch it (background-size:100%) but I'm not sure about that.

Answer 3

For a repeating background image you'd need to use an image that's independent of the sprite; as there is, to my knowledge, no way of specifying a particular segment of a sprite to repeat across the background, so you'd end up simply showing, and repeating, the entirety of the sprite.

And it seems, certainly in Chromium 19, that using background-size isn't the answer.