...

View Full Version : Opacity and its usage



eskdale
06-06-2007, 02:32 PM
Hi folks,

Been starting on a new site and want to produce a central div overlapping a slightly larger div to create a bordered edge.

Then using the opacity alpha filter to overlay this over a background photo.

Been reading Stu Nicholls site for tips, but still stuck on the div colour background and using alpha filter.

Code so far is here:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Flow Therapy Home Page</title>
<link href="inc/main.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
background-image: url(img/background_photo.gif);
}
-->
</style></head>

<body>
<div id="content">
<img src="img/content_top.gif" width="800" class="bck_img"/>
<div id="outer">
<div id="inner">
<h1>
This is where the text will go</h1>
</div>
</div>
<img src="img/content_btm.gif" width="801" class="bck_img" /></div>
</body>
</html>


CSS


/* CSS Document */
body {
background-image:img/background_photo.gif
}
#content {
width: 800px;
height:auto;
margin: 0px auto 0px auto;
overflow: hidden;
}
#outer {
width: 800px;
height:auto;
margin: 10px auto 10px auto;
background-color: 7ea01d;
filter:alpha (opacity=80);
-moz-opacity:.80;
opacity:.80;
width: 800px;
}
#inner {
width: 800px;
height:auto;
margin: 10px auto 10px auto;
padding-left: 10px;
padding-right: 10px;
background-color: 7ea01d;
filter:alpha (opacity=50);
-moz-opacity:.50;
opacity:.50;
}
.bck_img {
float:left;
filter: alpha(opacity=70);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
-moz-opacity: 0.70;
opacity:0.7;


The opacity is working fine on the two images I have at the top and bottom of the div, but not getting the background colour to appear. Although the filter is working on the text.

I suspect that I have to use a positioning element to get the opacity to work.

I could obviously just use a fixed image as the background and overlay a text box, but this wouldn't allow for growth (or shrinkage) of the text box at a later stage. What I want is an auto central area with the capped curved images at each end.

The images are below.

Any help much appreciated.

The first version of another site I got assistance from here is currently loaded here for those interested, thanks again for your help on that project.

http://www.shadwell-basin.org.uk/index.php



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum