CSS wrapper div's background to cover content - css

Question

I have 2 divs inside a wrapper div and I was wondering if it's possible to bring the #wrapper div on top of the content (#outer and #inner).
<div id="wrapper">
<div id="outer">
<div id="inner"></div>
</div>
</div>
I want the #wrapper to add a transparent background without making any changes to the HTML. I have tried doing so using z-index without success.
See this fiddle: http://jsfiddle.net/nPpDE/
Any help is much appreciated.

Answer 1

Managed it using :after- http://jsfiddle.net/t6mMR/ -No extra html!
Like this:
#wrapper:after {
position:relative;
top:-200px;
left:0px;
content:"";
width:400px;
height:200px;
display:block;
background:rgba(255, 0, 0,0.5)
}
The pseudo-element is placed above the others, and a semi transparent background applied to it.
__
EDIT: A slightly different way of doing it- (see comment below) (using position:absolute
http://jsfiddle.net/t6mMR/1/
__
Note- To be able to "click through" the pseudo-element, add pointer-events: none; to it.
http://jsfiddle.net/t6mMR/1/
To get this to work in IE, see css 'pointer-events' property alternative for IE, it may help.

Answer 2

You can give the children position: relative and z-index: -1 (or otherwise negative value), but I'm not sure how buggy that is or what the browser support is.
some more info available here: http://philipwalton.com/articles/what-no-one-told-you-about-z-index/
Here's a quick example: http://codepen.io/Rykus0/full/jhwev
Otherwise, as others have said, you need to include a new element and position using either absolute or fixed

Answer 3

What you are asking is not possible.
However, it is possible when you add another div inside the #wrapper and position it with
position:absolute;
and give it a transparent color
http://jsfiddle.net/nPpDE/1/
EDIT: Harley's solution is better since the OP doesn't want to change the HTML

Answer 4

?? and what about having opacity colors on inner containers and regular color on main container:
#wrapper{
position:relative;
background:black;
width:400px;
height:200px;
}
#outer{
position:relative;
width:400px;
height:200px;
background: rgba(50,0,0,0.75);
}
#inner{
position:relative;
width:350px;
height:200px;
background:rgba(0,50,0,0.75);
margin: 0 auto;
}
fiddle that goes with it :) http://jsfiddle.net/nPpDE/2/