HTML tips: Creating Gradient Background

Gradient background is the color change from one color to another. This effect is useful to beautify the appearance of web pages. To make it, please read the following steps:

First, we need to create an image that already contains color gradient. Use a painting program to make it such as photoshop, gimp, or something else. If it turned vertically, then the image width is 1px ~ 5 px. Conversely if it is the horizontal gradient then the image height is 1px ~ 5 px. Just make the image as thin as possible so that the file size gets smaller. The following example is a vertical color gradient with red and white colors(5px):

Furthermore, in order to widen the image, then use the following HTML CSS code:

For image with vertical gradient:

style="background-image: url(http://www.sample.com/gradient_background.jpg); background-repeat: repeat-x;"

For image with horizontal gradient:

style="background-image: url(http://www.sample.com/gradient_background.jpg); background-repeat: repeat-y;"

Note: Just change the url above (the red text) with the url of your image.

Usage Example:

Here is a table that will use the red-white gradient image as background. The codes is as follows:

<table style="border: 1px solid rgb(153, 153, 153); background-image: url(http://img203.imageshack.us/img203/9353/tipshtmlgradient01.jpg); background-repeat: repeat-x; width: 50%; height: 100px;"> <tbody><tr> <td style="vertical-align: middle; text-align: center;"> This table uses gradient background. </td> </tr></tbody> </table>

The result is as follows:

This table uses gradient background.

  

Related Posts: