javascript - Flip vertically a background-image every time it repeat-y

Question

I'm searching for a trick that repeat my background image vertically, but every time the image is repeated I want to flip it vertically.

I tried all the things in my mind with repeat-y but I don't found a solution, even searching for it in google.

Example:

Straight background-image

Flipped background-image when it repeat-y

And then flipped again to straight

There is a method to obtain that position?

I'll accept the solution in JScript (and library of it) only if there isn't a solution with pure css.

Thank you all!

Answer 1

This cannot be done using standard CSS3 since there are no CSS3 properties to rotate a background image.

Reference: http://www.w3.org/TR/css3-background

As suggested, combine the two motifs in a single image, much simpler and will always work.