That’s your problem right there. The background-image property only takes the url of the image to be used. If you want to set it to be used just once, you need to set background-repeat: no-repeat;. You can only combine them if you are using plain ol’ background:.
if what you are talking about is using multiple images in ONE element … that method is only supported by CSS3 capable browsers… and IE with the support of PIE. If thats ok with you then you can have multiple images like this:
.multipleImage {background: url(image.png) no-repeat top center, url(anotherimage.jpg) repeat-x bottom left,url(lastimage.gif) #red;}
note each image declaration ( containing: url, repeat, position , coordinates) must be separated by a comma. It’s my experience that if you still want a bg color it must stated ONLY on the last declaration.
To use image sprites, you need to ensure that the element you’re applying it as a background to is exactly the same size as the image on the sprite, and use background-position to get the right bit of the sprite showing.