Question

I have a background image which currently repeats vertically and is centered on the page. Here’s some ASCII art to describe the image, with left and right hand sides marked.

----------
|        |
|        |
|L      R|
|        |
|        |
----------

I’d like to have the image repeated across the whole browser window by having the it flipped along the vertical edge each time:

----------------------------------------
|        ||        ||        ||        |
|        ||        ||        ||        |
|L      R||R      L||L      R||R      L|
|        ||        ||        ||        |
|        ||        ||        ||        |
----------------------------------------

Now, I could create an image like the following one have have it repeat using CSS:

--------------------
|        ||        |
|        ||        |
|L      R||R      L|
|        ||        |
|        ||        |
--------------------

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

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

Thanks,

Tim

Answer 1

You can do this with CSS on most browsers, via the transform property (and for older IE, a fallback filter); article here. E.g.:

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) | Source

It even works back in IE6, thanks to the fallback filter. Wow. And of course, IE9 (transform is supported), Chrome, Firefox, Opera…

Doing that for the background is likely to be a bit of a pain, probably requiring absolute positioning and a negative z-index, but…