Rate this Entry

how to overcome opacity issue

Posted 9th June 2010 at 03:07 PM by saltedm8
I come across this trick whilst developing a clients website, I don't know if this solution is mentioned anywhere else on the web I hope its useful to someone.

One issue with using opacity in layers is that the above images, background colour etc take on the opacity as well...

you may say.. "ok, I would use an absolute to position a new layer as then it would no longer be a child of the opacity div", thats great, but what if you need that layer to stay in the middle with the rest of your content or in the correct place ?

here is my solution

THE PROBLEM



This is the code

HTML Code:
<style type="text/css">

body { background-image: url(images/background.jpg);}

#wrapper { margin:0 auto; margin-top:100px; width:960px; height:500px; background-color:#fff;    filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; }

#middle {width:920px; height:400px; background-color:#fff; margin: 25px 0 0 20px; }
</style>

</head>

<body>
<div id="wrapper">
<div id="middle"><img src="images/home.jpg" alt="" width="920" height="400" /></div>
</div>
</body>
</html>
A POOR SOLUTION



if you used absolutes and resized your browser then you will see that the image does not stay put

A BETTER SOLUTION



To solve this I included another div and put the wrapper inside it, then below that I added my image div, like so..

HTML Code:
<style type="text/css">

body { background-image: url(images/background.jpg);}

#wrapper { margin:0 auto; margin-top:100px; width:960px; height:500px; background-color:#fff; filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; }

#middle { position:absolute; top:0;  width:920px; height:400px; background-color:#fff; margin:150px 0 0 20px; }

#container { width:960px; margin: 0 auto;}
</style>

</head>

<body>
<div id="container">
<div id="wrapper"></div>
<div id="middle"><img src="images/home.jpg" alt="" /></div>
</div>

</body>
</html>
I hope that is helpful to someone... thank you

Posted in Uncategorized
Views 241 Comments 2
« web design, world away from the possibilities     Main
Total Comments 2

Comments

  1. Old Comment
    davidj's Avatar
    A nice work around

    is it supported across all browsers?
    permalink
    Posted 9th June 2010 at 05:01 PM by davidj davidj is offline
  2. Old Comment
    saltedm8's Avatar
    as far as I am aware, I don't see why not as there is nothing in it that usually causes issues
    permalink
    Posted 9th June 2010 at 06:23 PM by saltedm8 saltedm8 is offline
 

Contact Us - Top