Javascript 优化不可重复模式

当我寻找一个模式来作为背景时，我发现

我目前正在使用它作为我的网站背景

问题是这种模式是不可重复的

我把它设置为我身体的背景，所以如果我使用这个css，我会在每个新图片开始的地方得到非常明显的接缝

body {
    background:url(../images/testbackground.jpg) repeat;
}

我已经知道我可以通过旋转/翻转照片到更大的照片来解决这个问题。我已经做过了。它工作完美，可重复，在站点上看起来不错（你知道，除了接缝上的镜像，但这可以忽略不计）

问题是，我热衷于为网速较慢的人优化加载速度，因此拥有四倍于应有规模的背景并不适合我

是否有一种方法可以使用代码旋转/翻转照片？我不想使用复杂的jQuery/javascript脚本，但实际上我知道我必须这样做

有人知道这样做的脚本吗

以下是需要如何旋转的参考：

---

我没有一个可以翻转和旋转的解决方案。但我让你的背景可以重复：）

我只是从右边切掉了不合适的像素，所以背景现在小了一点

但是，既然你进入了优化：图片本身已经重复了！因此，您可以进一步将其裁剪为更小的尺寸，并且仍然具有几乎相同的背景：

---

我现在出去了，回来后我会测试一下好的，这是我的。这两种背景都不可重复。有一种黑暗渐变穿过它们，所以当图片重复时，接缝非常明显。通过使其变小进行优化的想法是有效的，但是，我仍然必须使用翻转使其变大，但它不会像使用全尺寸图像那样大。然而，图像越小，镜像越多，并且看起来不像预期的那样随机。所以我需要在外观和速度之间找到合适的比例。好吧，我没有意识到梯度的事情。好。。。这是一次尝试。如果我是你，我会创建一个背景作为png与一个透明的颜色和梯度，然后通过css左右。