How do I prevent sliced images in the CSS background from sitting on each other?

I have a background image I have sliced in Photoshop and set in a CSS class called".bd-image". I reference this class in the body element because I want it to be the background image for the whole page. I want each image to be 100% and not repeat. The problem is the images are on top of one another and not spreading out on the page. I changed the width and height form the absolute value to 100%, but no success. I need proper coding to set the images.

Does anyone know how to layer sliced images so they go down the page in the correct position and do not overlap? Or does anyone know of a sliced image background I can reference to get the correct coding?

  .bd-image{

  background: 
  url(images/orange-dark_01.jpg) 100% 46px  no-repeat,  
  url(images/orange-dark_02.jpg)  100% 60px no-repeat,   
  .........
  url(images/orange-dark_24.jpg) 100% 46px no-repeat;

 }

</style>


</head>

<body class="bd-image" onload="StartTimers();" onmousemove="ResetTimers();">