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.

• 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.

Copyright © 2008-2018 Pat Geary of Genealogy Web Creations All Rights Reserved