CSS wrapper div's background to cover content

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.

By "on top of", what do you mean? To apear above it's children? — harley_woop, Jun 21 '13 at 14:27
No, in terms of layout a child can't appear behind its parent. You can change the opacity of the outer and inner divs to see through them to the wrapper div, or create an absolutely positioned new inner div that sits on top of the outer and inner divs. — j08691, Jun 21 '13 at 14:27
Yes, to appear above its children. I was wondering if it's possible without having to add an extra div on top of everything as it kind of messes out the layout. — junkystu, Jun 21 '13 at 14:29
Adding a (semi) transparent background is as simple as using `rgba`, but a parent can't be above its child. I don't think you can do this withour changing the HTML. — harley_woop, Jun 21 '13 at 14:29
Read about `stacking order` - http://www.vanseodesign.com/css/css-stack-z-index/ — Nick R, Jun 21 '13 at 14:33

score 5 · Accepted Answer · edited May 23 '17 at 12:32

5

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.

edited May 23 '17 at 12:32

Community

1
1

answered Jun 21 '13 at 14:34

harley_woop

1,739
4
15
28

Nice solution, i just updated it abit, because position:absolute; is more suited (now it doesnt have a fixed height and width) http://jsfiddle.net/t6mMR/1/ – koningdavid Jun 21 '13 at 14:38
@koningdavid Right I'll add this too. – harley_woop Jun 21 '13 at 14:39
I hope for you that this containers holds no links nor forms , they'll be underneath of pseudo-element :) – G-Cyrillus Jun 21 '13 at 15:03
did you give it a try, cause bg is still there ? – G-Cyrillus Jun 21 '13 at 15:05
@GCyrillus It is, but that's what the OP wanted. You can still interact with anything below it with the code I added. – harley_woop Jun 21 '13 at 15:07
http://jsfiddle.net/t6mMR/2/ i meant IE9 ? others won't deal with rgba() anyway :) – G-Cyrillus Jun 21 '13 at 15:08
1

I think you should add this advise to your answer and this link too :) http://stackoverflow.com/questions/5855135/css-pointer-events-property-alternative-for-ie – G-Cyrillus Jun 21 '13 at 15:09
@GCyrillus Just found it myself :) I'll add it. – harley_woop Jun 21 '13 at 15:10
I actually need the #wrapper to be clickable so that's fine. @harley thank you very much. – junkystu Jun 21 '13 at 15:56
@GCyrillus It might be useful for others though :) – junkystu Jun 21 '13 at 15:56

koningdavid · Answer 2 · 2013-06-21T14:40:11.027

1

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

edited Jun 21 '13 at 14:40

answered Jun 21 '13 at 14:34

koningdavid

7,903
7
35
46

Thanks. That was my second option :) – junkystu Jun 21 '13 at 14:41

score 1 · Answer 3 · answered Jun 21 '13 at 14:38

1

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

answered Jun 21 '13 at 14:38

Tom Pietrosanti

4,184
2
24
29

I use this solution sometimes but I was never sure it was "okay". Dev's feedback on in would be appreciated. – Armel Larcier Jun 21 '13 at 14:43

G-Cyrillus · Answer 4 · 2013-06-21T16:16:07.293

?? 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/

CSS wrapper div's background to cover content

4 Answers4