Mary's Dark Wit Conundrum: What no one told you about z-index
I came across this opacity problem the other day while making a new theme.
The theme is based on Base theme only. It uses Base theme's layouts, and is totally responsive using the same principles employed in the Fluid Standard and Simple themes.
I have a background image which is very 'retro' and bright solid colours in region main and sideblocks, header and footer, which pick out the colours from the body's background image.
I made the header and footer opacity : 0.9; so that the background image shows through the translucent header/footer background colour.
Then I began styling the custommenu. Here again I employed very basic CSS. But on testing the menu the dropdowns fell behind #page-content. I went searching for z-index in git and did not find anything relevant only one YUI for the menu which was 500 so I made the custom menu 499 thinking that might work. No success! So I looked at my code and decided to take out the opacity as that was the only things different than Base theme, and the Menu worked fine. I put the opacity back and the menu z-index effect cam e back.
At this point I just could not believe it so I Googled z-index opacity and found that very informative article.
I think this is probably why adding
<param value="#000000" name="bgcolor">
<param value="opaque" name="wmode">
inside an <object></object> tag when adding a swf file works in IE where adding transparent doesn't, because of this z-index effect.
Did you then end up fixing your issue with an opaque image in the background or an alpha colored background?