I'd go check out this thread for suggestions:
https://forums.macrumors.com/threads/237566/
As I explained in that thread, here's your problem: Your "content" DIV has an opacity of .7 set. That means that both the DIV's background and *everything* contained within it also takes on an opacity of .7. Therefore, the text and the pictures will be "faded" as well.
There is no override for this in the CSS Opacity property--no child element can have an opacity higher than its parent. This is an oversight in the spec if you ask me, but it's the way it is.
That said, unless you're planning on doing something much fancier with the background, it seems like there are drastically easier ways of doing what you're trying to do.
For example, since the background color of the DIV is just black, and there's not enough texture in the pattern behind it to be visible, you could get a functionally similar effect by just setting the background color to about #333333. I can't even see the pattern through the transparent background on my monitor.
Alternately, you could set a background pattern that matches the one outside but is darker; with proper positioning of the start of the tile, they'll line up and it'll look the same as if it were overlapping. If you wanted to use a fancier image, you could do the same with absolutely positioned background images.
Another option would be a small PNG with an alpha channel set to about 30%; this doesn't work in IE5 or 6, but it will work in IE7 and just about anything else. That's what I've done in a similar situation; it looks fine even in the browsers that don't support it--just grey instead of transparent.
Or, you could use the CSS3 RGBA (RGB+Alpha channel) color for the background, as someone suggested in that other thread. Right now nothing but Safari supports it, but those that don't will just show a solid color and eventually support for it should expand.
There are other ways of going about this, of course, and maybe somebody will chime in with a smarter one than my suggestions.
