We do not need to use a gradient image for a background. We'd have to create the image using image manipulation software to do this. But now that we have a CSS code that works for most browsers, we can tailor our gradient page background to suit ourselves.
At least as far as width goes: 100% works. However, we have to estimate the number of pixels down the screen we'll need, as 100% for the height does NOT work. So, depending on the size of the text magnification each viewer has his/her browser set for, each viewer's experience will be different. I have the height set for 3000 pixels for this page. Safari users will see the bottom of the page stopping near the top of where the brown starts. Other viewers may see more pixels above or below the table's bottom. Some Chrome users will see the table extending beyond the background! Others will see the table ending above the background!
With the Safari browser, I used command plus the plus key to enlarge the text several times, but still the bottom of the table ended in the brown area. I don't know why there's such a huge difference in height of the displayed table between the Safari and Chrome browsers.
But there is another height solution. Add the following to the body tag: bgproperties="fixed" - this way you can get away with a much shorter height for the page, depending on your screen height, because the table that contains the page's contents will scroll upward without affecting the background. However, since everyone's screen height will be different, some viewers with shorter screen heights will see your page ok. Those with taller screen heights may see the bottom of your table extending past the gradient background. So I'd rather err on the side of too tall.
Concerning the colors, there are a few rules to follow, if we want precise results.
- GENERAL INFO:
- You can use either color numbers (#ffffff) - or color names. However, names with numbers after them, such as gold1, gold2, etc, will NOT work.
- Spelling mistakes in color names will result in showing only the background color specified in the code.
- The order of appearance depends on the percentages listed for each color and NOT on the order listed in the code strings. The bottom color must have 100%. The top color to appear will have the smallest percentage.
- For two colors:
- To get the gradient, one of the colors must be listed at 100% and it will be the one showing at the bottom, no matter whether it is first or last listed in the strings.
- The 2nd color's percentage specified will show as a percentage of the height, starting at the top, but will gradiate smoothly into the bottom color.
- If both colors are listed at under 100%, then the 1st will be on top separated from the 2nd by a straight line. No gradient will show.
- If two colors, one very light and one very dark gradate into each other, the gradient will not be smooth. Rather, the very light color will appear to overlay part of the dark color.
- For three or more colors:
- With 3 or more colors, if any color is listed as any percent less than that of the preceding or following color listed, it will appear at the top, no matter where it's listed in the string.
- To get the colors to appear from top down in the order in which you wish them to appear, the one with the least percent will appear at the top, then the next larger percentage color will appear. And so on. The color listed with 100% will always appear at the bottom.
More Examples
1 ~ 2 ~ 3 ~ 4 ~ 5 ~ 6 ~ 7
Rainbow Gradient
Main Page
ColorHex Color names listed alphabetically with the
color sample and the hex and dec codes.
If you wish to use CSS to make Grads on the Fly
here's an excellent tutorial by Sally
http://www.simplysally.com/tut/PHP/OTF/index.php |
