css opacity ??

[Evilreg]

hi guys

so i have decided to put a image in the background of the body of my webpage then the content within a wrapper/container fixed at 960 wide.

i then set my css to black for the main body section of the page and tried to use code i found when i googled how to change alpha/opacity in dreamweaver
and copy and paste it into the css section for that div.

however suprise suprise it didnt work.

im used to photoshop but im guessing that webpages dont work the same way ??

does anyone know how i can achieve this or a similar effect that is cross browser and webstandard compliant ?

what im trying to do is have the background image showing through to the main content are then create seperate text boxes with a paper/textile effect bacground so in the gaps between the text boxes you would see a dulled version of the overall backroung image if that makes sense.

 

[Emphacy]

Try this instead, you have to make the container div transparent.

.transparent
{
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
}
<div class="transparent">
</div>

Just an example... IE uses the filter:alpha while Firefox uses -moz-opacity.

 

[Evilreg]

.oneColFixCtrHdr #mainContent {
width: 960px;
margin-bottom: -20px;
margin-top: 0px;
margin-right: 0px;
margin-left: 0px;
background-color: #000;
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
}

thanks for the swift response heres what i have already but it dosent seem to work im maybe still getting somthing wrong? but not sure what my head spinning a bit now will have another look tommorow :/

 

[Evilreg]

i fiddled with this last night and it turned out i had to remove the background colour to allow the body image to show through.

just incase any one was wondering