Learn how to make your web page elements expose your cool backgrounds and add a translucent feel to the look of your page using simple CSS.
Yes you can do this in other ways. I do it here on developPHP using a clear PNG or GIF. This is just to show how to do it with no browser hacks using 100% CSS with no image, just in case somebody wants to see it. I would not recommend using RGBA alpha settings due to not working in IE8 and the fade looks lesser quality compared to this method.
For those of you looking to have your text and images NOT FADE inside the element, this link has a video tutorial and script for you:
http://www.developphp.com/view.php?tid=1060
<html>
<head>
<style type="text/css">
<!--
body {
background-image: url(myBG.jpg);
background-position:top left;
background-repeat:no-repeat;
background-attachment:fixed;
margin-top:48px;
}
#element1 {
width:900px;
color:#FFF;
text-align:left;
background-color:#000;
border: #F90 1px solid;
padding:24px;
/* start opacity settings */
filter:alpha(opacity=50);
-moz-opacity:.50;
opacity:.50;
/* end opacity settings */
}
body,td,th {
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
}
-->
</style>
</head>
<body>
<div align="center">
<div id="element1">
Put your content for this container here
</div>
</div>
</body>
</html>
How to Render Transparent Web Site Elements CSS Opacity Tutorial