1 / 6

Web Design

Web Design. Transparent Backgrounds. Why : Allow text to appear clearly above a graphic background image that still can be seen in the background. Without Transparency. With Transparency. How the technique works. Insert a container div that has your picture as a background image.

billy
Download Presentation

Web Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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 Transparency With Transparency

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

  4. The HTML Body Code • <div class="container" style= background-image: url('cptrees.jpg‘); > • <div class="transbox">Here enter your content: paragraphs, lists, tables etc </div> /* End transparent div */</div> /* End container div */

  5. The Embedded Style Code for the Trans Div • <head> ….<style type="text/css"> 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 */ • } • </style></head>

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

More Related