title: border-image > Semi transparent png behind contents
body: <p>I have a photo gallery that I have created a frame for that has a bit of transparent tape at the top. I want it to look like a polaroid taped to my background.
  The tape works perfectly onto the background, but i'd like it to also be in front of the picture. I am using a negative margin on my picture to make it overlap the frame. Unfortunately the picture appears to be in front of my frame.</p>
  
  <p>Thank you in advance code gods of the internet.</p>
  
  <p>This is my HTML:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;style&gt;
  html, body {
   background: black;
      background-repeat:   repeat;
      background-position: left top; 
     background-image: url("http://moof-it.com/testing/body_bg.jpg"); 
      background-attachment: fixed;
  }
  .galleryspace{
   display:inline-block;
   padding:15px;
   margin:0px;
  }
  .galleryframe {
   display:block;
   text-align:center;
   vertical-align:top;
   margin:0px;
   padding:0px;
   border-color: white;
   border-style:solid;
   border-width:28px 10px 10px 10px;
   -webkit-border-image: url(http://moof-it.com/testing/tapeframe2.png) 28 stretch;
      -o-border-image: url(http://moof-it.com/testing/tapeframe2.png) 28 stretch;
      border-image: url(http://moof-it.com/testing/tapeframe2.png) 28 stretch;
  }
  .imageingallery {
   display:block;
   background:white;
  }
  .imageingallery img{
   height:240px;
   margin:-12px -3px -1px -1px;
   padding:0px;
  }
  .imageingallery a {
   text-decoration:none;
   font-size:14px;
   font-variant:small-caps;
      color: #C27890; 
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class='galleryspace'&gt;
   &lt;center&gt;
   &lt;div class='galleryframe'&gt;
    &lt;div class='imageingallery'&gt;
     &lt;a href='http://moof-it.com/testing/ALittleSpell.jpg' title='A Little Spell'&gt;
     &lt;img src='http://moof-it.com/testing/ALittleSpell.jpg' alt='A Little Spell' title='A Little Spell'&gt;
     &lt;br&gt;
     A Little Spell
     &lt;/a&gt;
    &lt;/div&gt;
   &lt;/div&gt;
    &lt;/center&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>