Responsive css sprites + retina - css

Question

I read a lot about this topic the last days, but I didn't find a solution. I have two sprite sets, one with low quality for normal displays and one with high quality for retina displays.
My problem is, that my site has to be responsive, graphics should resize depending on the browser window. But with the background-size property, it seems that I can't tell the browser to resize the sprite. Here is what I got so far:
#logo-img {
max-width: 100%;
text-indent: -9999px;
height: 85px;
width: 360px;
background-image: url('/images/sprites-sa026cef942.png');
background-position: 0 -2609px;
background-repeat: no-repeat;
overflow: hidden;
outline: 0 none !important;
display: block;
white-space: nowrap;
}
#media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-device-pixel-ratio: 1.5) {
#logo-img {
background-image: url('/images/sprites-retina-se61e802cf4.png');
background-position: 0 -2601px;
-webkit-background-size: 360px, auto;
-moz-background-size: 360px, auto;
-o-background-size: 360px, auto;
background-size: 360px, auto;
}
}
The HTML is
<a href="#" id="logo-img">
<h1>My logo text</h1>
</a>
Everything works fine, except on mobile devices, or when resizing the browser window. The logo gets cutted, and doesn't resize to the browsers window. I was playing with max-width: 100%; and height: auto; but this only effects the outlines, not the sprites within.
Hope anyone knows a solution. It doesn't have to be IE8 compatible, but it would be nice ;)
EDIT
Before using sprites, I used background-size: contain; to make sure, that the background image gets resized to the size of the element:
#logo-img {
background:url(../images/sprites-retina/logo.png) no-repeat center center;
background-size: contain;
max-width: 100%;
text-indent:-9999px;
height: 85px;
width: 360px;
overflow: hidden;
outline: 0 none !important;
display: block;
white-space: nowrap;
}
This worked well, but then I can't use a spritesheet. Maybe that makes it clear what I mean.
EDIT2
I made a fiddle http://jsfiddle.net/euvRD/2/

Answer 1

I think you need to remove the comma from the background-size lines and you might want to set the height to 85px as well:
-webkit-background-size: 360px 85px;
-moz-background-size: 360px 85px;
-o-background-size: 360px 85px;
background-size: 360px 85px;
But the comma is the main problem here, I think. Did that help you?