positioning in having multiple background images in css - html

Question

I had an image which I had used as background in my css. I now want to have two images, one after the other. Think, earlier my website had one sponsor, now there are two sponsors, and so, two logos.
I was able to add two background images by googling around a bit, but the position of the second image is right on top of the first. When I give pixel values, it goes off as well.
This is my code so far
.app-header-logo {
background-image: url("../images/image1.png"),url("../images/image2.png");
background-position: center center, 200px center;
background-repeat: no-repeat;
float: left;
height: 50px;
vertical-align: middle;
width: 265px;
}
.app-header-logo a {
float:left;
width:190px;
height:50px;
text-indent:-999px;
}
How can I have image2 right after image1?

Answer 1

This can be accomplished by using CSS Sprites, with sprites you'll be able to combine multiple images into one single .png or .jpg file. There's a great online tool which will help you combine this images into one single file and to use them you just need to call a class for example .sponsor-1 which will contain the background-position for the Sponsor numer 1 image, plus it builds your CSS automatically so you don't have to worry about finding the right position of the background for each Sponsor image. Here's an example of how to use them:
.sponsor-1, .sponsor-2{
background: url(sprites.png) no-repeat;
}
.sponsor-1{
background-position: 0 0;
width: 80px;
height: 50px;
}
.sponsor-2{
background-position: -26px 0;
width: 80px;
height: 50px;
}