CSS Background Images To Repeat on x left and x Right with out overlapping -

ok trying set background image set like
<---repeating image on left --- center image --- repeating image on right --->

the image on left not same image on thie right.

i have tried using this

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; } 

but background-02.png overlapping background-03.png resulting in background-02.png repeating on both left right side of page when meant repeating on right.

here screen shot of design might give beter idear of trying make white boxes parts of background layer cropt out in there own image use on website [img]http://s7.postimg.org/iy0tm6k2j/screen_shot_2014_06_27_at_5_16_13_pm.png[/img]

any apreeseated fix this.


ok worked out used

'#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;     }' 

question is ceptable way or messy?

try use before , after pseudo classes below.

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; }