Background flipped tiles using Javascript

Question

I have a background image that is currently repeating vertically and centered on the page. Some ASCII art is depicted here to describe the image on the left and right sides.

---------- | | | | |LR| | | | | ---------- 

I would like the image to repeat in the entire browser window when it is flipped vertically every time:

 ---------------------------------------- | || || || | | || || || | |LR||RL||LR||RL| | || || || | | || || || | ---------------------------------------- 

Now I could create an image like the following to repeat it with CSS:

 -------------------- | || | | || | |LR||RL| | || | | || | -------------------- 

However, this image is already much larger than I want, so making it 2 times more is out of the question (especially since I plan to have a version of the retina too!). I thought doing this in Javascript could be a good compromise.

Does anyone know of a JS library that can handle this already, or point me to a resource that would give me a decent start?

Thanks,

Tim

Answer 1

You can do this with CSS on most browsers via transform (and for older IE, a backup filter ); article here . For instance:.

 img.flipped { -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; } 

Live Example (using your gravatar) | A source

It even works in IE6, thanks to the backup filter. Wow. And, of course, supported by IE9 ( transform ), Chrome, Firefox, Opera ...

Doing this for the background will probably be a little painful, it may require absolute positioning and a negative z index, but ...

Answer 2

You can use CSS3 to flip the image, but it will only work in modern browsers.

Take a look at this question and the approved answer: Click here