Using a Gradient Image for your background

Gradient images can be used almost anywhere on your webpages. I use them as backgrounds for the page itself, as well as the background for forms and heading tags. Using the Dynamic Drive Gradient Image Maker, it is a simple process to create your images.

Create your Gradient Image

Step One: Choose the two colors you would like to use as your background. I use Color Palette Creator to choose my colors.

Step Two: Using the Dynamic Drive Gradient Image Maker - see screenshot below.

Screenshot of gradient image maker.

Select the type of gradient you want to use. There are three to choose from.
Select the width and height for your image. I use 5px by 600 px for a page background image
Add the hex number for the two colors you choose
Select jpg or png format for the output - you will see a small preview of what your image will look like
Choose Get full size image - a new window will open with your image

Step Three: Save the image to your website on your computer.

Using your Gradient Image

Once you have created your image and saved it to your computer, you are ready to use it.

To add the image as a page background, add a statement to your style sheet -

body { font-family: Tahoma, Helvetica, Arial, sans-serif;
margin: 0;
padding: 0;
color: #000000;
background: #564c66 url('../images/background.jpg');
background-repeat: repeat-x; }

The background color should be the same color as the bottom color you used when creating your gradient image.

Example: This sites uses a background image as the page background.

Site: Genealogy Web Creations
Background Image for Page Background
Background Image used for the background for the h3 level headings on the right sidebar on some pages.
Background Image used for the form background on the Contact Page