title: How to Prevent a Background Image Covering Border Image
body: <p>I'm trying to add a ragged boarder to a parchment background. This is my CSS</p>
  
  <pre><code>#wrap
  {
      width:52em;
      margin:30px auto; /* centers the container */
      background-image: url(../images/parchment.gif);
  }
  .borderimage #wrap
  {
      border-width: 10px;
      -chrome-border-image: url(../images/parchment_border.png) 10 10 10 10 repeat;
      -moz-border-image: url(../images/parchment_border.png) 10 10 10 10 repeat;
      -o-border-image: url(../images/parchment_border.png) 10 10 10 10 repeat;
      -webkit-border-image: url(../images/parchment_border.png) 10 10 10 10 repeat;
      border-image: url(../images/parchment_border.png) 10 10 10 10 repeat;
  }
  </code></pre>
  
  <p>The .borderimage class is part of modernizr.</p>
  
  <p>When it's rendered, the background image covers the boarder image. If I set the background image to none, I see the boarder image at the borders. I had this working a couple of years ago, but it failed some time ago. I don't if it was because of a change I made or browser upgrades. A web search didn't turn up anything useful.</p>