Backgrounds Made Easy - Tiles -

Even more fun (or trouble) than solid backgrounds are the tiled graphics.

If you use a graphic for the background <body background="somekindof.gif"> it will tile to cover whatever screen size it may encounter. This may be 500x300 pixels or as big as 1600x1200.

You can use a repeating graphic to create a texture. A texture such as stone or wood or paper can give page a theme or mood. This wood chip picture might work for a lumber related web site.

Textures can repeat a graphic symbol or logo; they might resemble a physical surface to give an added dimension to the page.

They can also be very distracting. These wood chips will make an active background but it is terrible for displaying type. Putting the text information in tables will allow me to use this outrageous texture.

First, it has
to be Smooth!

The magic tool to make a background seamless is the offset filter. It lives in Photoshop's Filter:Other pull down menu. At left is the offset window.

The goal is to disguise the joints where the tiled image edges meet each other. This picture shows the result of the offset filter moving about half the width and height at the same time. This is the result of working with the Rubber Stamp tool. Bits of chips were stuck over the seams. Try to avoid obvious repeating shapes. I changed the offset settings back and forth to check all of the joints.
See the tiled result on the next page.