There are several ways to add background color to your web site. You can add some HTML in the <body> tag such as:
<body bgcolor="#000000">
This provides a solid black background to the web page. If you use black font on your site, suddenly your web page looks like someone turned out the lights. You’ll still see any other images and graphic elements you’ve used, but all of your text will not appear. At this point, you could change your font to white, or you could change the back ground color to a light gray, such as E0E0E0. That eliminates the sometimes harsh glare of a bright white web page, but then again, some web sites look very good using a plain white background.
Most likely, you’ll want the same background color on all of your pages. Open your CSS file and type:
body
{
background: #E0E0E0;
}
Provided that your CSS file is linked to your htm docs, you now have a light gray background on all of your pages.
Using Images as a Background
You can also use an image for the background. Use the following code and update the path to your image as appropriate.
body
{
background: url(../Images/rightbg.gif) repeat-x;
}
If you want the background image to repeat, then remove repeat-x.
Gradient Colors as a Background
Many web sites use a gradient color in the background. It provides a subtle effect and looks more professional than solid colors or pictures. To create a gradient color for your background, you need a graphics program that allows you to create gradient colors, such as Adobe Photoshop or Illustrator. Using that software, create an image that starts light and ends dark, or vice versa. Consult the software’s help on how to create that effect.
After you have your gradient image, just plug that into the path as shown above.
Creating Gradient Colors without Software
Graphics software can be very expensive. I found a site that appears to allow you to create your own gradient colors. I haven’t tested it, so I can’t vouch for it, but the examples look good.
Gradient Colors without Images
There is code that allows you to create a gradient colors through code. Fair warning, this code has a tendency to change your fonts and it does not work across all browsers. The code is provided here simply as a means to show that it is possible, but it’s not recommended.
<body style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#C0CFE2', startColorstr='#FFFFFF', gradientType='0');">
The above code provides a gradient effect for the background pages. You can use something similar within tables.
You can use the following code within a table tag:
style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#C0CFE2', startColorstr='#FFFFFF', gradientType='0');"
Again, it must be stressed that in tests, this only works in Internet Explorer and does not work in other browsers such as Chrome or Firefox. If you simply want to play around with it in IE, then feel free, but it’s highly not recommended to use this code in a professional site.
