border-image > Semi transparent png behind contents

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.

Thank you in advance code gods of the internet.

This is my HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
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;	
}
</style>
</head>
<body>
<div class='galleryspace'>
	<center>
	<div class='galleryframe'>
		<div class='imageingallery'>
			<a href='http://moof-it.com/testing/ALittleSpell.jpg' title='A Little Spell'>
			<img src='http://moof-it.com/testing/ALittleSpell.jpg' alt='A Little Spell' title='A Little Spell'>
			<br>
			A Little Spell
			</a>
		</div>
	</div>
  </center>
</div>
</body>
</html>

Solution

I would recommend you not to use border-image for this, but rather make the tape a separate image and position it the way you want. Here's an example of what I mean. Note that I don't have access to your tape image separately, so I just made a red block. You can replace that with the image of the tape.

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: 20px 10px 10px 10px;
}

.imageingallery {
  display: block;
  background: white;
}

.imageingallery .image {
  height: 240px;
  margin: -12px -3px -1px -1px;
  padding: 0px;
}

.imageingallery a {
  text-decoration: none;
  font-size: 14px;
  font-variant: small-caps;
  color: #C27890;
  display: block;
  position: relative;
}

.blockOver {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  margin: -40px auto;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<body>
  <div class='galleryspace'>
    <center>
      <div class='galleryframe'>
        <div class='imageingallery'>
          <a href='http://moof-it.com/testing/ALittleSpell.jpg' title='A Little Spell'>
            <img class="blockOver" src="http://via.placeholder.com/50x50/ff0000">
            <img class="image" src='http://moof-it.com/testing/ALittleSpell.jpg' alt='A Little Spell' title='A Little Spell'>
            <br> A Little Spell
          </a>
        </div>
      </div>
    </center>
  </div>
</body>

</html>