When Web designers began using Cascading Style Sheet code, they used it to set fonts and colors to entire websites to avoid editing every HTML file. Since around 2008, Web designers now use CSS to also avoid opening up their graphics editing programs. You can use pure CSS to add semi-transparent backgrounds to any content on a Web page, for example. In the past, this required creating a PNG file and then adding a PNG fix for Internet Explorer 6. Internet Explorer versions 8 and below still need a fallback, but you can add it using a filter.
Open the HTML file of the Web page you wish to edit. Use a code editor, such as jEdit, Notepad++ or BBEdit. HTML tags come in pairs with one opening and one closing tag, and content affected by the tags is enclosed within them. Find the tags surrounding the content you wish to give a a semi-transparent background. Here is an example:
<div id="box" class="blue">Content...</div>
Open the CSS file for your website in the code editor. If your website does not use a CSS file, add CSS code between <style> and </style> tags between the <head> tags on your HTML file. Add this CSS code:
div #box .blue {}
The text in front of the curly braces are CSS selectors. The first selector selects by tag name, the second selects by ID and the last selects by class name. You only need one selector, but you can add multiple selectors as shown in the example. Use information you find in the HTML tags to write your selectors.
Add your CSS style rules between the curly braces. Use RGBa -- red, green and blue color with alpha transparency -- to set a semi-transparent color to the background. Get the red, green and blue color values from your graphics program or find them using a color-picking tool on the Internet. The code looks like this:
.blue {
background-color: rgba(0,0,255,0.5);
}
The above example makes the background color blue with 50 percent opacity. Set the last value in the four-number set to "1" to make a full-opacity color.
Add the following code between the <head> tags of your HTML file to make the semi-transparent background color compatible with Internet Explorer 8 and below:
<!--[if IE]>
<style>
.blue {
background: transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#0000ff50,endColorstr=#0000ff50);
</style>
<![endif]-->
Replace the first six digits after "startColorstr=" with the hexadecimal color code, which you can find using a color picker tool on the Internet. Replace the last two digits with the percentage of opacity you want, such as "50" for 50 percent or "75" for 75 percent. Make the value of "endColorstr" identical to "startColorstr".