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.
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.
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.
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.
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.
The original home of HTML tutorials. HTMLGoodies is a website dedicated to publishing tutorials that cover every aspect of being a web developer. We cover programming and web development tutorials on languages and technologies such as HTML, JavaScript, and CSS. In addition, our articles cover web frameworks like Angular and React.JS, as well as popular Content Management Systems (CMS) that include WordPress, Drupal, and Joomla. Website development platforms like Shopify, Squarespace, and Wix are also featured. Topics related to solid web design and Internet Marketing also find a home on HTMLGoodies, as we discuss UX/UI Design, Search Engine Optimization (SEO), and web dev best practices.
Property of TechnologyAdvice. © 2025 TechnologyAdvice. All Rights Reserved
Advertiser Disclosure: Some of the products that appear on this site are from companies from which TechnologyAdvice receives compensation. This compensation may impact how and where products appear on this site including, for example, the order in which they appear. TechnologyAdvice does not include all companies or all types of products available in the marketplace.
