Q: How can I create a vertical border on my pages?
This trick is easy, once you understand how image tiling works.
When you specify a background image for your document using the background attribute for the
<body> tag, the image is rarely the exact size of the user's browser window. To fill the window, the
browser repeats the image over and over until the window is completely covered, unless you make the
background image fixed.
The image will be repeated both horizontally and vertically, as needed, to fill the window. If the image
is very wide and short, it will be repeated many times vertically but not at all horizontally. If you put
some sort of repeating pattern along the edge of the image, the repeating pattern will create a stripe or
border down the page.
For example, this page has a stripe down the left edge. The background image used for this page is
actually:
(I turned the border on so you could see the true image size). The wavy pattern on the left repeats as
the image is tiled down the page; I made the image transparent so your default browser background
color would show through. The result is a stripe down the left edge of the page that repeats for the
whole height of the page.
To see how to shift your page's left margin to take advantage of your vertical border, see my hot tip
on shifted left margins.