MikeJonesey.co.uk

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).
 

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;
}
 

f2 is assigned the opacity attributes:

CSS code for f2:
filter:alpha(opacity=99);
opacity: 0.5;
-moz-opacity:0.5;
 

and hey presto.