How do I add box shadows when the parent div has a background image?

Question

I'm trying to set up a drop-shadow for a div with 2 columns of text. I have the basic structure:

<div class="box>
    <div id="container" class="pseudo-box">
        <p>This is a box</p>
    </div>
</div>

and the css, below, seems like it should work, but whenever I un-comment the background image, whether it is in box or pseudo-box, the before and after boxes I want to use to create the shadow appear in the on top of pseudo-box, despite my z-indexes. How can I fix this?

EDIT: No columns for simplicity, also JS Fiddle

http://jsfiddle.net/rzZDD/

.box {
position: absolute;
top: 130px;
left: 0;
right: 0;
min-width: 850px;
bottom: 54px;
overflow: hidden;
/*  background: white url(/u/me/workspace/test2/webdesign/ribbon-horiz.png) top left no-    repeat;
*/ border-bottom: solid thin #aaaaaa;
font-size: 16px;
line-height: 150%;
text-align: left;
z-index: 10;
background: white;
    
    }
    .pseudo-box{
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cbcbcb), color-stop(100%,#bfbfbf)); 
        background: url(/u/me/workspace/test2/webdesign/ribbon-horiz.png) top left no-repeat;
        border: 1px solid #888888;
        border-radius: 6px;
        padding: 10px;    
        position: relative;
    }
    .pseudo-box:before,
    .pseudo-box:after {
       content:"";
       position:absolute;
        z-index: -1;
       bottom: 10px;
       left:10px;
       width:50%;
       height:50%;
       max-width:300px;
       -webkit-box-shadow:0 10px 5px rgba(0, 0, 0, 0.7);
       -moz-box-shadow:0 10px 5px rgba(0, 0, 0, 0.7);
       box-shadow:0 10px 5px rgba(0, 0, 0, 0.7);
       -webkit-transform:rotate(-3deg);
       -moz-transform:rotate(-3deg);
       -o-transform:rotate(-3deg);
       transform:rotate(-3deg);
       background-image: none;
       
    }
    .pseudo-box:after {
       right:10px;
       left:auto;
       -webkit-transform:rotate(3deg);
       -moz-transform:rotate(3deg);
       -o-transform:rotate(3deg);
       transform:rotate(3deg);
    }

  #content {

position: absolute;
left: 20px;
right: 20px;
top: 40px;
bottom: 20px;
min-width: 650px;
padding: 0 10px 0 0;
overflow: auto;    
border-top: thin solid #aaa;
border-bottom: thin solid #aaa;
border-left: thin solid #aaa;
border-right: thin solid #aaa;
border-radius: 4px;  
/*      box-shadow: 4px 4px 9px 2px #aaa;
 */ 
}  

Answer 1

if you set z-index:1; to parent it should allow pseudo-element to be under it without being underneath body.

Overflow:hidden, will cut things off .

position:relative; can be used to set from wich area , absolute child should take coordonates.

http://codepen.io/gcyrillus/pen/sLjEb

Solution is an extra element sticking at the bottom of the box that needed to be translucide. This extra element to draw shadow inside with overflow to only keep the part needed. http://codepen.io/gcyrillus/pen/bxiwL

Answer 2

One way to hack around this would be to supply a background-image with a gradient of white throughout, this can be achieved by:

background-image:-webkit-linear-gradient(top, white 0%, white 100%);

Here is a fiddle: http://jsfiddle.net/jAg9j/6/

Answer 3

Why not just put the shadows on the .box element rather than the .pseudo box like this:

.box {
  position: absolute;
  top: 130px;
  left: 0;
  right: 0;
  min-width: 850px;
  bottom: 54px;
  overflow: hidden;
  background: white url(/u/me/workspace/test2/webdesign/ribbon-horiz.png) top left no-repeat;
  border-bottom: solid thin #aaaaaa;
  font-size: 16px;
  line-height: 150%;
  text-align: left;
  z-index: 10;
  background: white;
}
.pseudo-box{
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cbcbcb), color-stop(100%,#bfbfbf)); 
    /*background: url(/u/me/workspace/test2/webdesign/ribbon-horiz.png) top left no-repeat;*/
    border-radius: 6px;
    padding: 10px; 
    position: absolute;
    left: 20px;
    right: 20px;
    top: 40px;
    bottom: 20px;
    min-width: 650px;
    padding: 0 10px 0 0;
    border-top: thin solid #aaa;
    border-bottom: thin solid #aaa;
    border-left: thin solid #aaa;
    border-right: thin solid #aaa;
    border-radius: 4px; 
}
.box:before,
.box:after {
   content:"";
   display: block;
   position:absolute;
   background:#444;
    z-index: 0;
   bottom: 30px;
   left:40px;
   width:50%;
   height:50%;
   max-width:300px;
   -webkit-box-shadow:0 10px 5px rgba(0, 0, 0, 0.7);
   -moz-box-shadow:0 10px 5px rgba(0, 0, 0, 0.7);
   box-shadow:0 10px 5px rgba(0, 0, 0, 0.7);
   -webkit-transform:rotate(-3deg);
   -moz-transform:rotate(-3deg);
   -o-transform:rotate(-3deg);
   transform:rotate(-3deg);
   background-image: none;

}
.box:after {
   right:40px;
   left:auto;
   -webkit-transform:rotate(3deg);
   -moz-transform:rotate(3deg);
   -o-transform:rotate(3deg);
   transform:rotate(3deg);
}