css - 背景画像の上の CSS ボーダー (同じ div?)

Question

この単純な境界線を設定された高さの div の上に表示しようと何時間も苦労してきましたが、それは起こっていません。z-indexing と ':after' をチェックアウトしましたが、何も機能していないようです。

コンテンツの親は次のとおりです: (ページの中央にあるコンテンツを確立します)

#content {
    position: relative;
    margin-left:auto;
    margin-right:auto;
    top: 50px;
    width:800px;
}

次に、コンテンツは div クラスの「greycontent」によって埋められます。

.greycontent {
position: relative;
z-index: 1;
height: 350px;
background: url(images/stacked_circles.png) repeat;
}

バックグラウンド URL で覆われている領域には、(端から離れた) 境界線を含めようとします。

.fill {
    position:relative;
    z-index: 2;
    border-style: solid;
    border-width: 2px;
    border-color: red;
}

それはうまくいきません。私の説明が不明確だった場合、この画像は私が伝えようとしていることを明確にするはずです:

ありがとうございました！

Jsフィドル