CHAPTER 42. CH39 TILED BACKGROUNDS 316
42.1 Tiling
By default, if a background image is not large enough to fill the viewable
screen, it will be repeated, both in the x direction (horizontal) and in the y
direction (vertical).
Our trick will be to take a small portion of an image. We call that small
portion a tile. Then we will repeat it endlessly.
The CSS goes in the style section, and looks like this:
body { background-image: url(my_tile.jpg); }
42.2 Edge Effect
When we tile the image, the edges may not line up pleasingly. They may be
rather abrupt. It may be obvious that two tiles are coming together, and it
may create a visible lattice or grid. That would be distracting.
Using an artificial image, you may be able to crop it exactly right so there
will be no edge effect.
Using a natural image, we will use the Gimp Map/Resynthesize tool to alter
the edges so they tile nicely.
42.3 Textures
Take a picture of something. We will crop it to get our tile.
For our background image, we want to use a texture that will be pleasing
and random enough that it does not appear to be repeating. We also want
it to not be distracting.
Uniform lighting helps a lot. Avoiding the vanishing-point effect of perspec-
tive helps a lot. Try to get a good perpendicular shot with even lighting.
Here are some ideas of textures. They might help you think of something
even better.
leather, as on a leather-bound book.
cork, as on a cork bulletin board.