not sure how you trying to achieve that... in this case i would recommend using Nicolas Gallagher techniques:
http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/

nice design btw.

i know, all those pseudo elements can be confusing :((
but it's really the easiest way...

another technique is to define the background for head and body:

<style type="text/css">
  HTML {
   background: url(файл 1); /* Путь к графическому файлу с первым фоном */ 
  }
  BODY {
   background: url(файл 2); /* Путь к графическому файлу со вторым фоном */ 
  }
</style>

in CSS3 you can define several backgrounds for ONE element, like this:

background: 
     url( images/aztec_block.png) 0 0 no-repeat,
     url(images/aztec_block.png) -576px 100% no-repeat, 
     url(images/aztec_block.png) -288px 0 repeat-y;

http://group.mind-productions.com/articles/multiple_backgrounds__css3_/
i'm not sure, but maybe you can make this work crossbrowser with Modernizer.
------------------
if you having problems with aligning transparent backgrounds through CSS, you can always correct the image itself by adding transparent pixels from the side you need to push it to..

here's a layout i made recently:
http://img12.imageshost.ru/img/2011/02/03/image_4d49c9d0ebf5b.png
there's a 4 backgrounds on each other :))