When creating a repeating image for a web page background, you can start with a tiny image, so it won't increase your page's load time. This results in a repeated image that may be too "busy" or choppy to look good. You may be tempted to use a much larger image to get a smoother effect, but that isn't necessary. With a little experimenting and this simple technique, you can have the best of both worlds -- a small image AND a smooth look.

Start with an image that's large enough to work with, like 50x50 pixels. (You can shrink it down, later.) Your goal is to simply turn your image inside out, so the repeats will match up on all sides when plugged into your web page.

Here is our starting image -- a section of a photo of a wasp nest:

If we used this image as-is, the resulting background would look like this:

For a smoother background with a continuous pattern, here is the procedure:

1) Select your image. Copy it, flip it vertically, then paste it back underneath the original. Here's what you'll get:

2) Select the new image. Copy it, flip it horizontally, then paste it back next to the original. Here's what you'll get:

Here it is repeated.

Now you can shrink it, fade it, or do whatever else you want before plugging it into your web page.Here is what it looks like reduced to the original size of 50x50 and repeated:

Here is the background image used for this page. It's a sample of my own knitting.

For more graphics tutorials, please visit My Digital Fixation.