Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    New Coder
    Join Date
    Mar 2007
    Location
    England
    Posts
    27
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Opacity and its usage

    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:

    Code:
    <!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
    Code:
    /* 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
    Attached Thumbnails Attached Thumbnails Opacity and its usage-content_top.gif   Opacity and its usage-content_btm.gif  


 

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •