Web page backgrounds - overview, tricks, examples.

Web Page Backgrounds


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...

<body bgcolor="#rrggbb" background="image.gif">
Rest of the document goes here

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.

Web page backgrounds tiling 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}

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}

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...

Web page backgrounds - small tiles

Here are a few examples of Web page backgrounds with wide tiles repeated only down a page...

Web page backgrounds - wide tiles

If you need help of professional website designers visit...

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 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.

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.

Solo Build It!

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.


Multiple domain hosting
A low-cost solution for owners of multiple Web sites.


An easy way to create a mobile version of your website

Sponsored links

Copyright © 2002-2023 BuildWebSite4u.com