title: Problems with CSS Box-Shadow:Inset on image
body: <p>I'm trying to replicate the CSS 'Vignette' effect, <a href="http://trentwalton.com/2010/11/22/css-box-shadowinset/" rel="noreferrer">detailed on Trent Walton's site</a>.</p>
  
  <pre><code>.vignette1 {
    box-shadow:inset 0px 0px 85px rgba(0,0,0,.5);
    -webkit-box-shadow:inset 0px 0px 85px rgba(0,0,0,.5);
    -moz-box-shadow:inset 0px 0px 85px rgba(0,0,0,.5);
    float: left;
  }
  
  .vignette1 img {
    margin: 0;
    position: relative;
    z-index: -1;
  
    width: 320px;
    height: 247px;
  }
  </code></pre>
  
  <p>It works well in isolation, but has problems on my production site, where the background settings for a parent div override the z-index on the image - live jsFiddle <a href="http://jsfiddle.net/7xqPC/" rel="noreferrer">demo here</a>.</p>
  
  <p>The second approach - mentioned in the original article's comments and included in the demo - works well, but my image has to be wrapped in the  tag - it can't be below it.</p>