Embed Size (px)
DESCRIPTION
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. - PowerPoint PPT Presentation
Citation preview
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
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.
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 */
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>
