1. Web Design Transparent Backgrounds

2. Why : Allow text to appear clearly above a graphic background image that still can be seen in the background. Without TransparencyWith Transparency

3. How the technique works I.Insert a container div that has your picture as a background image. II.Insert a nested div smaller than the container. (Trans Div) III.Style the Trans div to be partially transparent. IV.Type your text using a color that provides high contrast with the image below.

4. The HTML Body Code Here enter your content: paragraphs, lists, tables etc /* End transparent div */ /* End container div */

5. The Embedded Style Code for the Trans Div …. div.transbox /* { width: 500px; height: 418px; background-color: #c3a342; /* color of the transparent box (div) */ border: 1px solid black; /* for IE */filter: alpha(opacity=80); /* CSS3 standard */; opacity: 0.80; margin-top: 100px; margin-left: 250px; } div.transbox p { margin:0px 40px; font-weight:bold; color:#000000; /* text will be black */ }

6. An Example on the web http://198.83.120.96/fa10/ET_710_m1/