title: CSS Border on top of background image (same div?)
body: <p>I've been struggling for hours to try and get this simple border to appear on top of a div of a set height, but it's just not happening. I've checked out z-indexing and ':after', but nothing seems to be working.</p>
  
  <p>The content's parent is: (establishes the content to be in the middle of the page)</p>
  
  <pre><code>#content {
      position: relative;
      margin-left:auto;
      margin-right:auto;
      top: 50px;
      width:800px;
  }
  </code></pre>
  
  <p>The content is then filled by the div-class "greycontent":</p>
  
  <pre><code>.greycontent {
  position: relative;
  z-index: 1;
  height: 350px;
  background: url(images/stacked_circles.png) repeat;
  }
  </code></pre>
  
  <p>The area that is now covered by the background URL attempts to contain a border (away from edges):</p>
  
  <pre><code>.fill {
      position:relative;
      z-index: 2;
      border-style: solid;
      border-width: 2px;
      border-color: red;
  }
  </code></pre>
  
  <p>It just won't work. If my description was unclear, this image should clear up what I'm trying to convey: </p>
  
  <p><img src="https://i.stack.imgur.com/GTgoP.png" alt="enter image description here"></p>
  
  <p>Thank you!</p>
  
  <p><a href="http://jsfiddle.net/jenqh/1/" rel="nofollow noreferrer">JsFiddle</a></p>