Using Backgrounds to Enhance Your Website
 |
 |
What
is a Background?
A background is an image that is placed on a web page to add color or design to the page. The image is normally a .gif image and takes up the entire page. Then, tables, graphics and text are placed on top of the background image to complete the web page.
The background can have several purposes:
1. Create areas of navigation for the website
Some websites use a background to create a distinction between the sales text area and the navigational menus. The menu may be located in a right or left hand colored "bar" which is actually just a portion of a background. What I mean by a portion is that the background is an image that covers the entire screen. So, the "white" areas are also part of the background. You can view the example at the link below to see how this works....
http://www.webmastercourse.com/creating-backgrounds/sample1.htm
2. Form patterns in the site background
Patterns can be attractive for certain types of sites. However, I do not recommend placing any text directly over a pattern because it would be very difficult to read. Patterns can be used with "tables" layered over them which contain text, and this can be effective with the theme of a website. Go to the links below to see examples of pattern backgrounds......
http://www.webmastercourse.com/creating-backgrounds/sample2.htm
http://www.webmastercourse.com/creating-backgrounds/sample3.htm
3. Create an artistic design that compliments your theme
There are no limits to how a background can be used on a site. To show the theme of a site drawings, graphics, photos, etc. can be turned into a background to accomplish this purpose. For example, a photographer may use some of his photos to create a "collage" type background showing his work. A web designer may include a few "site" examples in a background. A flower shop may included photos of their flower arrangements - or clip art of flowers to enhance the site. The possibilities are endless.
Important things to Remember about Backgrounds:
* It is an image, so it may take longer to load than you text. It's good to have your text separate from your background (or layered over) so the text will load first. The visitor can then begin reading something while waiting. Otherwise they may click out if it takes to long.
* The background is only a foundation for a website - it cannot be your entire page because you are not able to create links "within" a background. Links, other graphics, and text for your page will be layered over the background image.
* If you want a solid color for your web page background, don't use an image unless absolutely necessary. You can check your design program or locate a web page color background in HTML that will work normally. In other words, you can make your entire page "pink" without using an image. This will cause your page to load faster than selecting an image as the background.
** In Netscape Composer, you can do this by selecting, "Format" and then "Page Colors and Backgrounds" in the design program. Then, you can choose which color to make the entire page. This section in Composer is also where you would insert your background image if using one.
Inserting a Background into your Web Page
There are two ways to insert a background:
1. Use your design program to insert it for you. Instead of inserting it as a regular image, your design program should have a section for "Page Colors" and/or "Backgrounds" (or a similar section). ** If you're familiar with Netscape Composer, you can use the method mentioned above.
2. You can insert your image using the HTML code below. Insert it right after the </HEAD> tag in the beginning of your page where the <body> tag would normally go:
<body background="heart-bgd.gif">
Of course, you would change the image name from heart-bgd.gif to whatever your image is named.
This concludes the backgrounds article. I hope you'll now have a better understanding of how backgrounds work and how to use them to enhance your website.
About the Author:
Article written by Candice Pardue, editor of Web Design
Weekly. Subscribe today to receive weekly web design tips,
articles and resources FREE by going to....
http://www.webmastercourse.com/creating-backgrounds/
