How do you crop a diagonal pattern in a way that makes it tileable for web?

Question

At the moment I have just given up and made one huge image and kept it at around 800kb for a web background. However, I realize this is not ideal. I can't figure out how to make this pattern tileable. I figure there's some crazy math I have to calculate to figure in the crop size so that the cut off for the images fit perfectly, but I have no idea how to do that. Has anyone run into this situation before and found a solution?

Answer 1

You're doing it wrong! :-)
Use css to solve this problem. Although there is no css property to rotate a background image, you can apply a neat trick to create the same effect.
1) save your file as a regular rectangular pattern (17.6kb!) :
2) save this in your images folder in your site root.
3) to create a rotated background for your page, use this:
body {
    position: relative;
background: url('../img/bgrot.jpg') 0 0 repeat;
body:before {
    content: "";
    position: fixed;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    z-index: -1;
    background: url('../img/bgrot.jpg') 0 0 repeat;
    -webkit-transform: rotate(-20deg);
    -moz-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    -o-transform: rotate(-20deg);
    transform: rotate(-20deg);
Done! Far easier, and more flexible. To see it work, check out the test I made at http://estructor.altervista.org/rotbg/test.html
You can inspect the code in your browser.
PS css transformations are unsupported in IE 8 - the background will still show, though (non-rotated). For IE8 you will might want to use a conditional comment in your html to create a conventional background pattern instead.
*update* I updated the example with a page wrapper element that uses the same background, but rotates it at a different angle. The trick here is to create a sufficiently large element that covers the entire box. Then you will have to set overflow:hidden; to hide the overflow so it contains the background pattern inside that box. It takes a bit of tinkering to get the working values for height and width, because it is slightly dependent on the actual content.