View Full Version : Opacity and its usage

Jun 6th, 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">
<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);

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


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

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.