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 <body> declaration...
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...
Web Page Backgrounds that aren't Tiled
You can implement this CSS effect by inserting this code into the HEAD of your document...
<!--
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...
<!--
BODY {background: #ffffff url(image.gif) no-repeat center}
-->
</style>
For more information on CSS (Cascading Style Sheets), see Advanced: Cascading Style Sheets (CSS).
Examples of Web page backgrounds
Here are a few examples of small tiles repeated across and down a page...
){kind=small}
){kind=small}
){kind=small}
){kind=small}
){kind=small}
){kind=small}
){kind=small}
){kind=small}
){kind=small}
){kind=small}
){kind=small}
){kind=small}
){kind=small}
){kind=small}
){kind=small}
){kind=small}
){kind=small}
){kind=small}
){kind=small}
){kind=small}
Here are a few examples of Web page backgrounds with wide tiles repeated only down a page...
){kind=small}
){kind=small}
){kind=small}
){kind=small}
Looking for high quality backgrounds?
Visit Animation Factory.
They have over 500,000 professional Web graphics, backgrounds, animations, video clips, and PowerPoint templates.
See also...
Web Design
General tips and links to useful Web design resources.
Web Page Design
How to make your pages logically organized and user-friendly.
Web Fonts
How to use fonts more effectively in your Web design.
Web Site Navigation
Maps, navigation bars, frames, JavaScript, site search engines.
- Overview
- Site Content
- Search Engine Optimization
- Web Design:
- Web Page Design
- Web Page Backgrounds
- Web Fonts
- Web Site Navigation
- HTML Codes
- Web Graphics
- Domain Names
- Web Hosting
- Website Builders
What's New
Inexpensive Web Hosting
How to choose a fast and reliable service from the bulk of cheap hosting solutions.
Web site builders
Easy way to build a professional looking site for commercial use or just for fun.
Multiple domain Web hosting
A low-cost solution for owners of multiple Web sites.