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}
If you need help of professional website designers visit...
DesignCrowd
DesignCrowd is a marketplace for crowdsourced graphic design like custom logos, websites, flyers, business card design and more.
Businesses launch a design project and receive on average 100+ designs in 5 days from 400,000 freelance designers and agencies worldwide.
DesignCrowd offers over 40 design services including logo design, website design, app design, business cards, promo flyers,
posters and more services to help entrepreneurs and small business grow their businesses.
99designs.com
99designs.com provides a useful service. It connects thousands of passionate designers with small
businesses and individuals who need design projects completed. Simply post your design brief and
multiple designers from around the globe will enter the contest by submitting different designs
for you to choose from.
Logo Garden
LogoGarden.com is the simplest way to create a professional brand for any business. You can create a customized logo
in just minutes, no design experience needed. Start building your professional brand by creating a free logo.
crowdSPRING
This is an online marketplace for graphic design. Entrepreneurs and businesses who need things
designed - from logos and stationery to websites and brochures - simply post what they need and
name their own price and deadline. Once posted, over 87,000 designers from 150+ countries around
the world will submit actual designs - not bids or proposals - for the buyer to review until they
find the "the one."
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.
Website 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
- Website Navigation
- HTML Codes
- Web Graphics
- Domain Names
- Web Hosting
- Online Website Builders
What's New
Inexpensive Web Hosting
How to choose a fast and reliable service from the bulk of cheap hosting solutions.
Easy Website builders
Easy way to build a professional looking site for commercial use or just for fun.
Dedicated IP hosting
Benefits of using a static over shared IP address.