I have an image for use as a background. It's three ojects that are identical in a pattern of top right, center left and bottom right-center(with a white background and a bit of space between). This pattern is put on repeat for the website background, but because of the size of the bg image I would like to make it just one image repeated in a specified distance apart.

Any ideas of how to do this. I figured JS was the best bet.

An idea I had was that I recall PHP being able to build images on the fly, but it seems that it would still end up sending a larger image file. Perhaps some javascript can make an image on client side...

You can position a single background image, but there are no properties that affect the repeat frequency or position relative to each other.

repeat-x can be positioned relative to the top of the viewport
repeat-y can be positioned relative to the left of the viewport
but in both cases the repeat will butt the images together in the repeat direction.

Theoretically, it would be possible to place the image as a background to a floated, sized div, and use DOM scripting to insert this element into an absolutely positioned container div that was set with a negative z-index (might give cross browser problems) a calculated number of times, then let the rest of the page element sit above this container.