How To Create CSS background images with opacity
To create a faded background you will need three layers: im using three divs (f1,f2,f3).
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text
f1 will contain the image:
html:
<div id="cssd1">f1</div>
css:
#cssd1
{
position:relative; margin:0px; padding:0px; width:200px; height:200px;
border:1px solid #000;
background-image:url(../images/krokodilani5.gif); background-repeat:no-repeat;
}
f2 will contain the colour:
html:
<div id="cssd2">f2</div>
css:
#cssd2
{
position:relative; margin:0px; padding:0px; width:200px; height:200px;
border:1px solid #000;
background-color:#0000ff;
}
and f3 contains your text:
html:
<div id="cssd3">f3<br/>text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text</div>
css:
#cssd3
{
position:relative; margin:0px; padding:0px; width:200px; height:200px;
border:1px solid #000;
}
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text
f2 is assigned the opacity attributes:
CSS code for f2:
filter:alpha(opacity=99);
opacity: 0.5;
-moz-opacity:0.5;
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text
and hey presto.