Search code examples
javascriptcsscss-positionbackground-position

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

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:

Background Straight background-image

Background flipped vertically Flipped background-image when it repeat-y

Background flipped vertically again 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!

Solution

  • 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.