Статический фон по углам сайта

[Champ]

Здравствуйте!

Пробую сделать сайт со статическим фонам по его углам.

Вёрстку делаю через дивы.

Вожусь достаточно давно, перечитал кучу советов, но всё равно что-то не работает

Вот код:

    <div align="center" style="width: 100%">
        <div align="center" class="TableMainTopRight">
            <div align="center" class="TableMainTopLeft">
                <div align="center" class="TableMainBottomLeft">
                    <div align="center" class="TableMainBottomRight">
                        <div align="center" style="padding: 20px 0px 60px 0px">
                            <div style="background-color: #FEFCF7; height: 100%; width: 670px; vertical-align: top;
                                border: 1px solid sienna">
                                <div align="center" class="FrameBackGroundTop">
                                    <div align="center" class="FrameBackGroundBottom">
                                        <table style="width: 670px">
                                            <tr>
                                                <td style="vertical-align: top">
                                                    Тут какой-то полезный текст
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

Содержимое ЦСС:

body
{
    margin: 0px;
    padding: 0px;
    height: 100%;
    background-image: url(/Images/bg.jpg);
    background-attachment: fixed;
    overflow: hidden;
}
table
{
    border-collapse: collapse;
    margin: 0px;
    padding: 0px;
    text-align: left;
}
td
{
    padding: 0px;
    margin: 0px;
}
a
{
}
h1
{
    color: #94282e;
}
h2
{
    color: #94282e;
}
h3
{
    color: #94282e;
}
img
{
    border: none;
}
p
{
    text-indent: 20px;
    text-align: justify;
}
.TableMainTopRight
{
    background-image: url(/Images/FlowerTopRight.png);
    background-attachment: fixed;
    background-position: top right;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    min-height: 100%;
    position: absolute;
    text-align: center;
}
.TableMainTopLeft
{
    background-image: url(/Images/FlowerTopLeft.png);
    background-position: top left;
    background-repeat: no-repeat;
    background-attachment: fixed;
    width: 100%;
    height: 100%;
    min-height: 100%;
    position: absolute;
    text-align: center;
}
.TableMainBottomRight
{
    background-image: url(/Images/FlowerBottomRight.png);
    background-position: bottom right;
    background-repeat: no-repeat;
    background-attachment: fixed;
    width: 100%;
    height: 100%;
    min-height: 100%;
    position: absolute;
    text-align: center;
    overflow-y: scroll;
}
.TableMainBottomLeft
{
    background-image: url(/Images/FlowerBottomLeft.png);
    background-position: bottom left;
    background-repeat: no-repeat;
    background-attachment: fixed;
    width: 100%;
    height: 100%;
    min-height: 100%;
    position: absolute;
    text-align: center;
}
.FrameBackGroundTop
{
    background-image: url(/Images/FrameBackGroundTop.png);
    background-repeat: repeat-x;
    background-position: top;
}
.FrameBackGroundBottom
{
    background-image: url(/Images/FrameBackGroundBottom.png);
    background-repeat: repeat-x;
    background-position: bottom;
}

Причём в каждом браузере отображается по своему. А в ИЕ вообще пустота.

Вот как оно выглядит:

Пример

Прошу помощи.

[Champ]

Буду благодарен за найденную ошибку или за рабочий пример.

Edited June 17, 2012 by Champ

[Sensei]

например так http://jsfiddle.net/sensei/jkgqB/

может, кто и лучше вариант подкинет.

[Champ]

например так http://jsfiddle.net/sensei/jkgqB/

может, кто и лучше вариант подкинет.

Спасибо, сейчас попробую реализовать.

Выглядит намного проще чем у меня