HTML is a fantastic programming language for the web. It's very simple to learn, yet has the ability to produce some really nice visual effects. I'm going to teach you one really nice effect using HTML, which will allow you to give your websites an extra layer of visual polish that will set them apart from the rest.

In this article we're going to learn how to create a background with a color fade, simply by using a simple trick involving a background image.

Firstly you'll need to define a few things within the CSS of the page. Insert the code below into the CSS portion of the code.

<styletype = "text / css"> body {background-image: url (/background.png); background-repeat: repeat-x; background-color: # b99450; } </ style>

If you're not sure, this section of code should site just before the

</ head> tag within your code.

Now you'll need to create an image file called "background.png". This image should only be 1 pixel (1px) wide, and should be a color which fades from solid through to transparent.

You'll notice that the code specifes "background-repeat: repeat-x;"

This means that the files "background.png" will be repeated only along the x-axis, or horizontally from left to right across the page. This will create the effect that there is a color fading down the page, and it will scale 100% across the screen regardless of the size of the window. The benefit of making the image 1px wide is that it will be very fast to load.

The final part of the trick is "background-color: # b99450;"

This is the color of the entire page which will sit benefit the background image pattern that you have just created. The end effect will be that it appears that a color blends from the top down to a solid color. The best part about that is that if you have a page where a lot of content flows down the page, it will have a nice even color, and will not create an ugly image repeat every time the page length doubles.

Experiment with some of your own designs and see what you like the best. You'll be able to make some really nice color schemes that compliment your designs nicely!

If you're still unsure about how to create this background effect in your designs, or for any other questions, please feel free to contact me at Gold Coast Web Designer .