We are using CSS files with embedded images on some sites. Have a look at Nicholas C. Zakas excellent cssembed utility.
The good thing: Just after loading the CSS most of the images needed to display the site are at the client. No longer does a new visitor request dozens of small 1KB PNG files for backgrounds, bullets and tiny icons. It’s all right there in the CSS. This really pays of when you target mobile users where latency and slow connections let page rendering times go thru the roof with lots of small requests.
The bad thing: This only works in new browsers, not in IE6 and IE7. So we needed an effective way to load a different CSS depending on the users browser.
This is what we did:
<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="http://path.to/main.css" />
<![endif]-->
<!--[if gte IE 8]>
<link rel="stylesheet" type="text/css" href="http://path.to/main_embedded.css" />
<![endif]-->
<![if !IE]>
<link rel="stylesheet" type="text/css" href="http://path.to/main_embedded.css" />
<![endif]>This will load the main_embedded.css for all browsers except IE7 and below.
This way all non IE6/IE7 users get the benefit of the embedded images and faster page loading times while the poor IE6/IE7 visitors get the old CSS.