CSS 背景图像在 x 左和 x 右上重复而不重叠

Question

好的，我正在尝试设置背景图片所以它就像
<---左侧重复图像---中间图像---右侧重复图像--->

左边的图片和右边的图片不一样。

我试过用这个

body{
background:
url(../Img/Background-01.png) center top no-repeat,
url(../Img/Background-02.png) right 0 repeat-x,
url(../Img/Background-03.png) left 0 repeat-x;
background-color:#232323;
}

但是 Background-02.png 与 Background-03.png 重叠，导致 Background-02.png 在页面的左侧和右侧重复，而实际上它只是在右侧重复。

这是我的设计的屏幕截图，它可能会让您更好地了解我正在尝试制作的东西白框是背景层的一部分，在网站上使用自己的图像 [img] http://s7.postimg.org/iy0tm6k2j/Screen_Shot_2014_06_27_at_5_16_13_pm.png[/img]。

任何帮助都将被预先确定以帮助解决这个问题。


好的，我已经解决了，这就是我使用的

'#Container{
    position:relative;
    width:1000px;
    margin: 0 auto;
    left: 0;
    right: 0;
    border:thin solid #000;
    z-index:4;
}
#BGCont
    {
    position:absolute;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
    width: 100%;
    z-index:0;
    height:500px;
    }
#BGLeft
    {
    position:absolute;
    width: 50%;
    left: 0;
    z-index:1;
    background:url(../Img/Background-03.png) left 0 repeat-x;
    height:500px;
    }
#BGRight
    {
    position:absolute;
    width: 50%;
    z-index:2;
    right: 0;
    background:url(../Img/Background-02.png) right 0 repeat-x;
    height:500px;
    }
#BGCenter
    {
    position:absolute;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
    width: 1200px;
    z-index:3;
    background:url(../Img/Background-01.png) center top no-repeat;
    height:500px;
    }'

现在我的问题是，这是一种可行的方式还是太困惑了？

Answer 1

尝试像下面这样在伪类之前和之后使用。

body
{
 background: url(../Img/Background-01.png) center top no-repeat;
 background-color:#232323;
}
body::before
{
 background:url(../Img/Background-03.png) left 0 repeat-x;
}
body::after
{
 background:url(../Img/Background-02.png) right 0 repeat-x;
}