Opacity in main content area or canvas

[lorenpenner 0]

What do I change in the following code so that my background-color becomes 50% opacity but the text and images also don't change their opacity? I have an baclground image in the back that I want to show through. body #page {background-color: #000; filter:alpha(opacity=50); -moz-opacity: .50 opacity:.50;} The website page is: http://www.hjwfilms.com/about/

[cmunns 16]

It can be tricky to get non-transparency inside of transparency: http://css-tricks.com/non-transparent-elements-inside-transparent-elements/ This is the jist, it will require code tweaking, but shouldn't be too hard...I didn't see the transparency on your site though when i checked.

[lorenpenner 0]

How could I code the opacity through a image file and get rid of the background color? Would this be easier. When I tried it last night I could seem to 1) either find the right item to add it to or didn;t code it correctly. You can see that I placed a background image in the back. Once the canvas background achieves opacity, it will show through. Any ideas?

[cmunns 16]

when you do it as an image. You need to make sure you save the file as a transparent .png file How did you create the image/

[lorenpenner 0]

I used Photoshop. I made a black square and applied a 50% opacity to it. I'm just not sure what part of the code I should apply it to and what might that additional could look like? I tried this and it didn't work: body #page {background-color: #000; background-image:url('http://www.hjwfilms.com/wp-content/uploads/2011/02/opacity50.png');} Am I missing something?

[bryan-hadaway 3]

If you're going to use an opaque/semi-transparent background graphic you have to have the background set to transparent: `body #page{background:transparent url(http://www.hjwfilms.com/wp-content/uploads/2011/02/opacity50.png)}` Thanks, Bryan