CSS Sprites Help needed

[A.Chakery]

Hello,

I have a vbulletin powered website and I need to combine all skin images into one for performance issues, but I am having a big problem finding the right solution for this.

This is some examples of my CSS codes that my skin images are used , I need to use a CSS Sprite for them :

body
{
	background: #FFFFFF url(http://domain.net/images/gradient_body.gif) repeat-x top left;
	color: #2b6d9f;
	font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
	margin: 0px;
	padding: 0px;
	
}

.alt1, .alt1Active
{
	background: #E9E9E9 url(http://domain.net/gradients/gradient_alt.gif) repeat-x top left;
	color: #16334b;
	font-family: arial;
	border: 1px solid #D8D8D8;
}
.alt2, .alt2Active
{
	background: #E9E9E9 url(http://domain.net/gradients/gradient_alt.gif) repeat-x top left;
	color: #16334b;
	border: 1px solid #D8D8D8;
}
.inlinemod
{
	background: #FFFFCC;
	color: #000000;
}
.wysiwyg
{
	background: #E9E9E9 url(http://domain.net/gradients/gradient_alt.gif) repeat-x top left;
	color: #767676;
	font: 10pt trebuchet MS,verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
	margin: 5px 10px 10px 10px;
	padding: 0px;
}

iv#wrapper{background:#FFF url(http://skin.vetarena.net/misc/border_left.gif) no-repeat top left;width:945px;margin:0 auto}
div#wrapper-inside{background:url(http://skin.vetarena.net/misc/border_right.gif) no-repeat top right}

I have created the combined image and I got the proper locations of these images, but I don't know how to use them as CSS backgrounds (cause there shouldn't be any template edits.. in other words its kind of impossible since there is tones of templates in vbulletin that should be changed ===> we should use only CSS to perform this)

Any help about this issue is really appreciated....


regards