Website Backgrounds: 5 Cool Tricks for a Professional Look
by David Leonhardt
Most websites feature white backgrounds. Or they sit on a navy or gray background -- but most of the screen is still white, like a page of paper set against the darker background. Occasionally, you might run across more interesting colors - reds and purples and greens and rust - often looking more gaudy than professional.
But every now and then, there is a website with a photo or a drawing or a pattern background. This tutorial will show you not just how to place a background on your website, but five clever tricks to spice up the background without resorting to gaudliness
The basic html code to place a background on your web page is very simple:
<body background=image.jpg>
To place a background in a table, perhaps set against a solid color page background, the basic html code is as follows:
<table background=image.jpg>
The image file called image.jpg now becomes your background. A typical image would show up "tiled". In other words, it repeats itself horizontally and vertically to fill the screen. This usually does not look very professional, so below are five tricks to clean it up and spice it up.
1. Use "strip" graphics. Strip graphics are simply very long images that stretch across the screen. When they repeat, they repeat one below the other. To see this in action, view my page at TheHappyGuy.com. The yellow strip along the left side looks like it is part of the top banner image. But it is a 650 by 20 strip image, mostly white, with a touch of yellow along the left side. This works well with patterns that vary only from left to right.
2. Hold the background in place. When a visitor scrolls down, the text rolls over the image. I used this trick at my personal website: LeonhardtOnline.com (Please forgive the mess - I just don't seem to find the time to clean it up.) The html code to do this is:
<BODY background="image.jpg" bgproperties="fixed">
This works for patterns, but it works best for photos or drawings, such as a faded image of your company logo or a faded scenery shot or a faded photo of people interacting. (Remember that the background should not stand out at the expense of the foreground text and images, which is why you want faded images.)
3. Another great background trick is to place a smaller picture in the background, such as your company logo or some other image that you do not want to take up the entire screen. This works best against a white background. Below is the html code:
<BODY background="image.jpg" style="background-repeat: no-repeat;">
If you want the image to show up just in a table:
<table background=image.jpg style="background-repeat: no-repeat;">
I used this function in just one cell of a table by inserting it in my <td> tag for my navigation menu at Vitamin-Supplements-Store.net. Notice how the faded bottle is in the background behind the navigation links, but it does not repeat down the page.
4. You can further control the position of the background image. Consider the following code:
<table background=image.jpg style="background-repeat: no-repeat;
background-position: top right;">
We now have a background that fills the top right corner of the page. Depending how big it is, it might cover most of the screen or just the corner.
5. Another way to use background images are as navigation buttons. While search engines can easily follow image links, they don't carry the same relevancy as keyword-rich text links. A background button image can make a text link look like a button. Each navigation link would have to be placed within its own table or cell, then apply the code used in the previous example.
Used properly, background images can greatly enhance the appeal of your website. If you are looking for a way to spice up your website, these five tricks can help.
About the Author
David Leonhardt is a freelance writer and SEO specialist. Contact him at Info@TheHappyGuy.com or visit his website at TheHappyGuy.com. Read more webmastering and online marketing articles at http://www.thehappyguy.com/marketing-articles.html
Click for more Articles on Web Designing .... more
How To Build Your First Web Site
How to Design a Website for the Search Engines
10 Tips on designing a fast loading web site
7 Web Site Design Mistakes That Will Lose You Clients
Seven Ways to Put Your Business Online And The One Guaranteed Way to Do It at No Cost
13 Ways To Destroy Your Website
How to customize web templates on your own to create unique websites
Basic Web Design Principles
Making Better Web Graphics that grab your attention and load FAST
The technical stuff
Use Server Side Includes To Ease Your Workload
Design an Eye Catching Website
How does your website measure up
Are Web Templates Worth It?
Hexadecimal Color Notation on the Web
Gain an edge by viewing your competitors source code
eCommerce Web Design Solutions
Conversion Counts: Improving Web Conversion Rates
welcome-to-your-website.htm
Click for more Articles on Web Designing .... more
----------------------------------------------
| How to determine the link popularity of a web page | Worldwide, Countrywide, Global & Local Major Search Engines | Learn How to Optimize Page to Get Top Rankings in Search Engines | How to Design Good Looking Website | Effective Web Site Promotion - Is An Art Learn How To Promote your Website | Affiliate Revenue Information How To Earn From your Website
----------------------------------------------
Address : Station Road, Behind Nagrik Stores,
Pandit House, Thane (W) - 400601 Maharashtra ( India )
Please Send your Suggetions &
Comments on 3ppcseo@gmail.com
---------------------------------------------- |
