A gradient background provides a colorful background for any web page, however there are several problems with gradient backgrounds you need to consider before choosing this type of background, as shown below:
What is a Gradient Background?
A gradient background is a variation colors arranged from lightest to darkest or visa-versa. It can be used as the background for a web page or just within table cells or div boxes. This technique is usually only available in a graphics program like Adobe Photoshop or Fireworks.
A typical Blue Gradient Background
A background image usually only needs to be about 5 pixels high and as long as the page is wide. Following is a shortened version of a blue gradient background image which will be set to repeat down the page so it will fill up the page.
Problems with using a gradient background:
- The text needs to be a different shade than all variations of the background or it won't show up on the page.
- A gradient background has to be provided in an image format and the color on one end of the image is darker than on the other end which means you cannot allow the image to repeat to the right or the page will repeat the dark edge on the right side.
- A gradient background image has to be the same width as the page and if someone views the page in a larger resolution the image will either repeat on the right side and double the size of screen and the text will spread out also making it hard to read or there will be a large area with no background.
- Older computers using only 256 colors will not see evenly blended colors from one shade to the other but different shades of color placed next to each other.
- AOL and Compuserve browsers use an image compression system that distorts gradients and in order to view them properly they need to turn it to "off".
- Gifs are limited to 256 colors and gradient images need a lot more colors to smoothly blend the color shades so save them as a jpg.
- Although the image itself may be only a few Ks after it repeats across or down the page several times it takes up more memory so a gradient background is not a good idea on a memory intensive site (lots of pictures or long pages of text).
So, in order to use a gradient background you have to design your page to be used at only one resolution.
Gradient Background Samples in Different Resolutions
A gradient background designed for 800x600 resolution with no repeat horizontally viewed at 1024x768 resolution with a white background on the page.
|
A gradient background designed for 800x600 resolution with a horizontal repeat viewed at 1024x768 resolution.
|
Other Options for a Horizontal Gradient Background
to fit all Resolutions
- You could provide an alternate plain color background matching one of the colors on the end of your image for problems mentioned above in CSS (in css you can apply both a background color and background image so where the image ends the background color takes over however it won't match on both ends). Choose a web safe color or it may not display as you wanted.
- You could also apply the background color to the CSS and the image to a centered Table the width of the smaller resolution that you want to display, so the background will show where the image doesn't. The problem with a horizontal gradient background is that you can't match the colors on both ends.
If you think you can work around the above problems then try a gradient image as follows:
Designing a gradient background image
In order to design a gradient background you need a graphics program that produces gradient colors (I designed this one in Photoshop).
Step 1:
Select "file/new" and set the width you have chosen for the new image and about 5 pixels for the height and set the background as transparent. For an 800 resolution page make the image 760 picels wide to allow for the scroll bars on the browser and for a 1024 resolution make the image 984 pixels wide.
.
Step 2: decide on colors
Now you need to decide on the colors --if you are using black text on the page you don't want the darkest shade to be so dark that the text won't show up and the same if you are using light colored text for the lightest end of the background. See the sample background at on the right (or top of page); notice how the text on this sample page almost dissapears on top of the darker background on the left side so a lighter blue or white would have been a better choice.
Step 3: select the image
Select the image with the retangular marquee tool  .
Step 4: activate gradient tool
Click on the gradient tool (in Fireworks 8 it is behind the Paint Bucket tool) .
Step 5: choose gradientcolors
Make sure your "gradient tool options" box is open and ,if not, select "window/show options" or double click on the gradient tool (this may be slightly different on your version of Photoshop but there should be a box with graduated colors in it now. These colors are determined by the colors you have selected for background and foreground.
Choose different colors for background and foreground and watch the gradient change--keeping in mind what was said above about dark text on a dark background and visa-versa. There are different options of how to arrange the colors in the gradient options window (dark to light or light to dark and different textures) so play around with those till you get the result you want.
For more advanced options choose "help/help contents" and under "Find" search for "gradient fill" and read the instructions (the sample on this page was designed in normal mode, 100% opacity, linear fill with dither selected to prevent banding of the colors.
Step 6: fill the image
Place the pointer/cursor inside the image in left corner and drag to the right and the fill should now be aplied to your image. If it doesn't work make sure the options window is still active and try again, or use your "help" for further instructions.
Step 7: saving the image
Now save your image. Sometimes, if you view the background on diffrent computers or browsers you will see the different colors separated. This is called banding. A gif is limited to 256 colors unless you select dithering, which will prevent banding. If you choose to save the image as a .jpg select millions of colors instead of thousands. If your background is still banded try adding a tiny bit of noise to the image.
Step 9: enter code on page
Change the code in the body tag as follows:
<body background="images/bluegradient.jpg">
If you are using CSS put the following code in the body portion of your CSS file which will tell the browser to repeat the image downwards and to the right:
background-image: url(images/bluegradient.jpg);
To prevent the background image from repeating to the right and only repeat downwards add this code after the above text:
background-repeat: repeat-y;
To fill a table cell with a gradient background make the image the width of the cell and add the following code to the table cell:
<td background="images/bluegradient.jpg">
Now view your page and enjoy!
Gradient Bars as a Border on a Web Page
The same technique as mentioned above was used to make the following gradient bars that frame the top and left side of a logo on a webpage. Once you have the horizontal gradient bar finished then flip it to vertical view and then join them at the top left corner using either table cells or div boxes. See the finished gradient bar design on the website by clicking the image below:
If this Tutorial didn't solve your problem send an email to and maybe
I can tell what you are doing wrong.
Lori Eldridge
Lori's Web Design
Copyright © 2004 Updated 1-17-09
All Rights Reserved.
Return to the:
Main Tutorials Page |
Photoshop Tutorials |
Fireworks Tutorials
Other Graphics Tutorials:
Straighten Distorted Photos |
Emboss Images |
Feathered Edges |
How to Design a Gradient Background |
How to Design a Textured Background |
How to design a Vertical Background |
Applying a drop shadow to a tilted object over a colored background |
How to Make An Animation
Other Grapics Pages:
Free Graphics for Artists,
Custom Designed Graphics
Logos Designed
Landscape logos
|
