Background flipped tiling using Javascript

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

Do you want to flip image using javascript? – Priyank Patel Nov 08 '12 at 10:25 — Priyank Patel, Nov 08 '12 at 10:25

T.J. Crowder · Accepted Answer · 2012-11-08T10:40:06.510

0

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

edited Nov 08 '12 at 10:40

answered Nov 08 '12 at 10:25

T.J. Crowder

1,031,962
187
1,923
1,875

Thanks, that solves the flipping issue. The other problem is now how to flip it across the entire browser width by creating as many divs as necessary to achieve the goal... – tarmes Nov 08 '12 at 10:40
@tarmes: You can query the window's width, which tells you how many `img` elements you need to create. Or you can just create enough to make things as wide as you feel is reasonable (say, 3,000px worth). Creating and appending an image element is trivial: `var img = document.createElement('img'); img.src = "..."; img.className = "..."; document.body.appendChild(img);` (or you might use `insertBefore` with a reference element to insert elsewhere). – T.J. Crowder Nov 08 '12 at 10:41
1

Since there are really two aspects to this question, and the flipping one has been solved here, I've described the positining problem in more detail in another question: http://stackoverflow.com/questions/13287662/extending-a-background-using-javascript – tarmes Nov 08 '12 at 10:57

score 0 · Answer 2 · edited May 23 '17 at 12:18

0

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

Have a look at this question and the approved answer: Click Here

edited May 23 '17 at 12:18

Community

1
1

answered Nov 08 '12 at 10:28

iMoses

4,338
1
24
39

Background flipped tiling using Javascript

2 Answers2

Linked