Images brought onto a web page via CSS as backgrounds have the advantage of automatic tessellation: they tile both horizontally and vertically by default. This makes them very suited for fluid designs.

There are five steps to editing an image to be a seamless background. For the first step I will be using an image of the city skyline of Jacksonville, Florida taken by Jonathan Zander from Wikipedia Commons; for the other steps, an image of the city of Baltimore, Maryland by 3 Sons Productions from Flickr.

Before we get to the sequence of making a tiled image, there are five unspoken rules. The first and most important is to determine that you have rights to the image; both of the images we will be using are licensed under Creative Commons. The second unspoken rule is to always use the highest resolution version of the image available. The third is to save a copy of the original image in the originals folder of your site. Before working on anything in PhotoShop, you should also set up the application correctly. The final step is to crop the image so that it only shows the part of the image you wish to use: anything that is a pure color (such as black or white) can be replaced by using background-color for the appropriate selector when the image is applied as a background.

Now the steps to make it a tessellated image:

Determine that the image is suitable for tiling.

An image with a significant singular feature – a visible sun or moon in the sky, for example – is likely to be inappropriate as a tiled background image without considerable editing. In addition, the horizon of the image must be horizontal, as the right and left edges of the image (or top and bottom, if you are tiling vertically) must match. The best way to check this is to turn on rules (CMD-R) in PhotoShop and drag out a guide across the horizon line.

Preview the tiling of the image

Adobe has the Pattern Maker plugin for PhotoShop (now an optional download for CS5), but I’ve never found it terribly useful. Instead, I use this tried-and-true technique:

From the menu bar, choose Filter / Other / Offset…

Offset the image in the direction you wish to tile it by approximately half the image’s width. You will see PhotoShop move the image across the canvas, wrapping the excess around the other side.

If the wrapped image looks seamless, it is good; either cancel the filter, or move the invisible "join" via the Offset filter to an aesthetically pleasing position, click OK, resize the image, and use Save for Web and Devices. You may find that you will need to use a slightly higher quality level than normal if saving the image as a JPEG (50 – 60), due to the fact that the JPEG algorithm tends to introduce artifacts in the edges of the image. These artifacts will not be seen until you tile the image in the web page itself, so you may need several go-rounds of compressing and saving, experimenting with different levels of compression.

If the wrapped image is not seamless, move the offset to a round number that is easily remembered and press OK, then use the appropriate tools to smooth the transition between the left and right edges. I would suggest the Clone Stamp tool, but the Healing Brush and Patch tool, among others, could be equally appropriate.

As before, either reset the Offset of the image, or move the now-invisible join to another location, resize the image, and export the image in a web-ready format.

The image should now be ready to use as a tiled background in a web page via CSS.