使用CSS的角点图像

我有一个相对简单的设计,这让我感到困惑。它有4个大图像,需要粘贴在左上角、右下角和左下角、右下角。图像非常大,内容容器与它们重叠。有点像这样:

Structure http://www.kalleload.net/uploads/nizyjc/zxyagpfrmjqe.png

我的问题是,我的实现在除IE8(我刚刚开始尊重IE8)之外的所有主流浏览器中都能正常工作。有更好的办法吗?

目前我正在使用以下标记:

<div class="corner-top">
    <div><img src="./images/top-left-corner.png" /></div>
</div>

<div class="corner-bottom">
    <img src="./images/bottom-left-corner.png" />
</div>

<div id="container">
....
</div>


#container {
    margin: 60px auto;
    width: 488px;
}

.corner-top {
    background: url('./images/top-right-corner.png') top right no-repeat;
    height: 356px;
    min-width: 868px;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -20;
}

.corner-top div {
    min-width: 868px;
}

.corner-bottom {
    background: url('./images/bottom-right-corner.png') bottom right no-repeat;
    bottom: 0;
    height: 325px;
    min-width: 868px;
    overflow: hidden;
    position: absolute;
    width: 100%;
    z-index: -20;
}

.corner-bottom div {
    min-width: 868px;
}