Opacity applies to an element and all its children as a whole. Therefore when you make an element transparent you can’t suddenly say that you want its children non transparent because they have already been rendered as transparent. The element and all its children are drawn on the page and then the whole lot is made transparent.
That is one of the big drawbacks of using opacity.
With css3 you can use rgba to create a transparent background only but it doesn’t work in IE8 and under. Therefore the easiest solution is just to make a transparent png image instead and repeat it on your outer. The only problem then is IE6 and you would need to use the alpha image loader filter if you wanted ie6 support.
There is actually a method using opacity but it means changing the html a bit. The transparent background is applied to a separate element form the content and then shimmed underneath with absolute positioning.
But I’m all for the easiest solution. So you mean I should make a PNG of the inner section of that entire photo and apply it to the page background? My question then would be, what if I add something and the page gets longer?