Web page backgrounds are simple, fast, and effective tools to make your site look unique and to remind your site visitors where they are.
Web page backgrounds can be specified in the declaration...
<body bgcolor="#rrggbb" background="image.gif">
Rest of the document goes here
</body>
The bgcolor attribute allows setting of the background color for the document."#rrggbb" is a hexadecimal (base 16) red-green-blue triplet used to specify the background color The background attribute sets an image file that will be tiled across the browser window, to provide a background for the document. Browsers allow the use of GIF, JPG, and PNG images as Web page backgrounds. For more information on choosing the right image format, see Web Graphics: Web Graphics Formats.A browser tiles a background image as many times as is necessary to fill the screen. It will tile horizontally and vertically. If the tile is not as wide as the screen, the browser will repeat the image, over and over, to the right, then to the bottom.
If you want a pattern repeated across and down a page, then creating a smaller tile like the one below will do just that. Remember, though, good Web page backgrounds should have very little contrast, otherwise it will make text hard to read.
If you have a wide background tile that is as wide (or wider) as the screen, but not very tall, it will only tile down the page, not sideways. This is a way to create those popular colored bars along the left or right side of the screen.
Of course, you should make your background tiles wider than the current high-end standard, to avoid tiling across. The examples below are wider than 1280.
Since browsers cache graphics (they store them on your hard disk so they don't have to download them repeatedly), using one or two Web page backgrounds on all your pages will help your site load faster.
Background tricks
Fixed Background
Microsoft's Internet Explorer has the ability to watermark HTML documents, by fixing the background so that it doesn't scroll. To do this, add bgproperties=fixed to the body element...
<body background="image.gif" bgproperties=fixed>
Web Page Backgrounds that aren't Tiled
You can implement this CSS effect by inserting this code into the HEAD of your document...
<style type="text/css">
<!--
BODY {background: #ffffff url(image.gif) no-repeat}
-->
</style>
You can also center the background, however it will be centered as the background of the entire document, not centered on the screen...
<style type="text/css">
<!--
BODY {background: #ffffff url(image.gif) no-repeat center}
-->
</style>
For more information on CSS (Cascading Style Sheets), see Advanced: Cascading Style Sheets (CSS).
