Creating seamless rotated background image
===

I want to repeat a background image that is rotated. Trying to make it seamless is destroying my soul.

Starting with something simple, consider each image is laid out like bricks. Creating a seamless repeating background image is pretty simple:

![enter image description here][1]

(the red area is the crop). You can see this working as expected at http://jsfiddle.net/mPqfB.

Now let's say I want to rotate the image by 45 degrees:

![enter image description here][2]

Unfortunately, the same crop no longer works, as you can see on http://jsfiddle.net/mPqfB/1.

I'm trying to figure out how to crop the image correctly so that we have a seamless repeat. There's probably some fairly trivial maths involved to do this but I can't for the life of me figure it out.


  [1]: http://i.stack.imgur.com/wLgDC.gif
  [2]: http://i.stack.imgur.com/e55qY.gif