Hi,

what are simple and effective ways to achieve semi-transparent background image and non-transparent text?
Example page with transparent backround image: http://cpanelhosting.cz.cc/ (it has low brightness image, no transparency set)

So far i have found this way to allow making transparent image out of normal image using CSS:

a HTML file:
PHP Code:
<html>
<
head><title>Page title</title>
<
style type="text/css">
div.bg {
-
khtml-opacity:.50;
-
moz-opacity:.50;
-
ms-filter:"alpha(opacity=50)";
filter:alpha(opacity=50);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
opacity:.50;
background-image: url('cms_wordpres_drupal_joomla-free.jpg');
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top right;
background-color:rgba(255,0,0,0.05); // very soft pink background
}

div.text {
font-family:Tahoma;
}
</
style>
</
head>
<
body>
<
div class="bg"><div>
<
div class="text">
Text here
</div>
</
body>
</
html>


So in body i have two DIV blocks.
- First i have one with class "bg" (background) for this one i set in CSS transparency and bg image.
- Second DIV has class "text" and for it i only set font familly

---------
Another way is to edit image in IrfanView or other editor and Adjust colors (Color corrections) to decrease Brightness.