I'm trying to find a code that will allow me to display multiple repeating background images at the same time on the same page. For the sake of trying to make my request make some more sense, here's the layout I'm trying to code.

http://students.ausd.net/kitferkat/pink.gif

I need three different backgrounds for the layout to work properly. (1) The white stripes across the top to repeat on the X coordinate (2) The black box going down to repeat on the Y coordinate and (3) The grey and white stripes to repeat throughout the entire layout. Basically my problem is that I have three seperate codes for each of the backgrounds and all three of the codes work perfectly fine by themselves but I can't use them all together (trust me, I've tried) to get all 3 images to display all together as backgrounds. They just cancel each other out and everything just messed up. I would prefer not to use frames or div layers (I know how to do it already) but am just looking to see if there is just a code that will achieve this effect. Any help would be GREATLY appreciated, thanks

PS. In case it helps, heres the CSS code I used for (1) (2,3 are basically the same thing)
body {
background-image: url('BG1.JPG');
background-repeat: repeat-x;
background-position: right top;
background-attachment: fixed;}

not using the background-image deal. You can only have one of those per page.

So your only other option would be div layers or tables.

The only thing that strikes me is to use a graphics program and combine the backgrounds into one, because no matter how hard you search it doesn't seem possible that you can have more than one background at a time..

ok thanks. Was just hoping and praying that there would be another way to put multiple backgrounds ^_^