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.

Answer 2

I would load the background image like so

<style> body{     background-image:url('mybackground');     background-repeat:no-repeat; } </style> 

As the image has already loaded we can do a little JavaScript without the browser doing much extra work. we can check whether the height of the image fills the entire window.

<script> var el      =  $('body')[0]; var src     =  $(el).css('background-image').slice(4, -1); var img     =  new Image();  checkHeight =  function(){         if(img.height < window.innerHeight){        repeatBg();          } } img.onload  =  checkHeight(); img.src = src; </script> 

If the image background does not fill the full height of the window then this background needs repeating/flipping straight away(this will increase load time); otherwise event listeners can be used to trigger the check later on.
The following function draws the image to the canvas element and creates a dataURL. The background-image src is updated to the new dataURL and repeat-background is changed from no-repeat to repeat-y(vertically);
the event listeners are then remove so the function is not called again.

<canvas style="display:none" id="canvas"></canvas>   <script>  repeatBg = function(){       var canvas = $('#canvas')[0];     var ctx = canvas.getContext("2d");     canvas.width = img.width;     canvas.height = img.height *2 ;     ctx.drawImage(img,0,0);     ctx.scale(1, -1);     ctx.translate(0, -img.height);     ctx.drawImage(img, 0, -img.height, img.width, img.height);     var dataURL = canvas.toDataURL();     $(el).css({         'background-image' : 'url('+dataURL+')',         'background-repeat' : 'repeat-y'     });         $(window).off('load, scroll, resize', checkHeight);         } $(window).on('load, scroll, resize', checkHeight);    </script> 

And hey presto

http://jsfiddle.net/dtjones1988/y49rvu73/6/