Seamless Backgrounds

Creating seamless backgrounds are a snap. For this walk-through we'll use Adobe Photoshop, although any graphics program with an "offset" feature will do.

First, we'll start with 100x100 cloud-like .gif:

If set as a background, it would look like this tiled throughout your page:

Seams suck! Let's fix it shall we?

This is where the offset command in Photoshop comes in.

For this we'll need to convert to RGB color (24 bit) instead of Indexed color (8 bit). Under Mode, pick RGB Color.

Next, under Filter > Other > Offset.

Offsetting is best done 50% by 50% for these purposes. Since this image is 100x100, Offset is 50 pixels by 50 pixels. The most important thing is to set the Undefined Areas to Wrap Around. Our image now looks like:

Next you'll need just a tad amount of artistic ability, but probably less than you think. Use the clone brush to cover up the horizontal and vertical lines. Use a very light Opacity and go fairly slow. First, I did the vertical line:

Then the horizontal line, and shazam!

Look Ma! A seamless background!

Easy eh?