css - repeat only 1px from a png sprite as background for div

after googling a lot for something similar, i could find any REAL answer.

the problem is simple, i have a sprite png image that i use for all of my image as开发者_运维技巧sets in the site. and i have a bg.png file which is 1px by 1px semi transparent file. which where needed, i put as background for the div.

i would like to get rid of that 1px file.

any idea how this can be done ? repeat 1x1 px portion of the image as repeated background?

EDIT: i do have an idea for a solution:

with c# code i can manipulate the part of the image i need, create a new one and return it as memory stream. but i just wondered if this is possible by pure css.

Unfortunately, it's not possible. Typically, a separate background sprite is used. I would recommend reading here: http://www.phpied.com/background-repeat-and-css-sprites/

Also, from http://www.telerik.com/help/aspnet-ajax/grid-appearance-css-sprites.html

As a consequence:

a) images that repeat in both directions cannot be included in a sprite, they should remain on their own
b) images that repeat horizontally should occupy the entire width of a CSS sprite (as in the example above)
c) images that repeat vertically should occupy the entire height of a CSS sprite

Would you consider a rather dirty cheat solution? When I'm faced with this question, I steal one pixel from the width of the image and in that 1px-wide column of pixels I put what I want. That is, I copy your bg.png into that column of pixels.

That way, I can get rid of bg.png altogether. Of course, I have to modify every img the same way, but it's worth it (to me) if the img is coming from a sprite.

http://www.pwilson.net/so-wide-cheat.jpg    is replaced by    http://www.pwilson.net/so-narrow-cheat.jpg