How to Use Backgrounds to Enhance your Website

Ever noticed those cool backgrounds on websites you’ve visited and wonder how they did it?

This web design tutorial will explain how to use color codes to enhance your background designs.

What is a Web 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.

Learn Web Design For Beginners at Home

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.

2. Form patterns in the web site background

Patterns can be attractive for certain types of web 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.

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.

website background designImportant things to Remember about Website Backgrounds:

Truthfully, the only difference between you and the web design experts is time.

If you’ll invest a little more time in reading, you’ll be that much nearer to expert status when it comes to web 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.

Learn Web Design From Home

* The background is only a foundation for designing 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.

Inserting a Background into your Web Page

There are two ways to insert a background:

1. Use your Internet 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).

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.

Those who only know one or two facts about web backgrounds can be confused by misleading information.

The best way to help those who are misled is to gently correct them with the truths you’re learning about website designing here.

This concludes the background and color code section of the web design tutorial.

background design I hope you’ll now have a better understanding of how backgrounds work and how to use them to enhance your web site designs. Click here for more about website designing.

Filed under: Web Design