Creating seamless rotated background image

Question

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 li

Answer 1

The trick is to crop the pattern at points where the section being cut off matches the section remaining on the opposite side of the crop area (see example cuts in blue). It'll probably take some trial and error to get it right but you should be able to do it easily enough.

Answer 2

is the rotation is exactly 45 degrees, you'll have to find out the least common multiple of the width and height of your unrotated pattern.

• in your case, that's 15100 (width 100 and height 151)
• it would be much better to scale your pattern to width 100 and height 150, so the least common multiple is only 300

Take that number and some math (pythagorean theorem). Assume your number is the length of the two short arms and calculate the length of the hypotenuse - that's our result (make a square image of that size to get your pattern).

• in your case, that's 21355
• with resizing, it's ~ 424

Note that this is just typed straight from my head because i can't try it out practically at the moment - but i'm really sure it's correct.

edit: a fast (and messy) test got me to this:

• http://i.imgur.com/rZuu9.jpg
• http://jsfiddle.net/mPqfB/2/ (click the image-link first, otherwise jsfiddle doesn't show the image)

accidentally i made the pattern only be 423 in height and the rotation isn't perfect (don't have photoshop here), but it's good enough to prove that my math is correct.