html - Inset box shadow behind h2's background image/color, need it above -

html - Inset box shadow behind h2's background image/color, need it above -

as title suggests i'm having issue inset box shadow going underneath h2 elements background, need above element.

http://jsfiddle.net/9qyt4/

i've set background image allow easy editing of colors depending on pages of site visited, help on how create shadow appear above h2 appreciated, thanks!

also, possible png gradient well? improve solution i'm trying shadow on right (but it's showing on top , bottom well)

sass

#region-postscript-second { width:300px; background:#fff; margin: 20px; box-shadow: inset -6px 0 10px rgba(0, 0, 0, 0.15); h2 { background: url('http://vt.lexcorp.ca/sites/all/themes/vermont/img/middle-heading-bg.png') center center no-repeat #8ccc1b; font-size:20px; text-transform:uppercase; font-weight:normal; color:#646567; text-align:center; }}

view html on jsfiddle, thanks!

i created pseudo after element contains shadow: http://jsfiddle.net/jpux3/

#region-postscript-second:after{ content: " "; display: block; position: absolute; right: 0; top: 0; height: 100%; width: 14px; box-shadow: inset -14px 0 8px -8px rgba(0, 0, 0, .25); }

and #region-postscript-second added:

position: relative;

here @ end 1 side box-shadows - http://css-tricks.com/snippets/css/css-box-shadow/

html css background css3